HTML and CSS Reference
In-Depth Information
EXAMPLE
15.5 (
CONTINUED
)
<style type="text/css">
body{ background-color:blue;}
1
p { background: white;
font-style: bold;
font-family: courier,arial;
text-indent: 5%;
margin-left:20%;
margin-right:20%
}
</style>
</head
<body>
2
<p id="para1">
Today is Sunday and there is a sailing festival
going on in the Ferry Park. The tall ships are docked in the
bay for tourists to visit. The fog is rolling in.</p>
3
<p id="para2">
I'm trying to figure out how to grab the text
from this paragraph with JavaScript using the innerHTML
property. I may take a break now and go to the park.</p>
<script type="text/javascript"
>
document.write("<p>JavaScript's innerHTML property</p>");
4
ptxt1=document.getElementById("para1").innerHTML;
5
ptxt2=document.getElementById("para2").innerHTML;
document.write("<p style='background:yellow'>"+
6
ptxt1.toUpperCase()+
"</p>");
document.write("<p style='background:yellow'>" +
7
ptxt2.toUpperCase()
+ "</p>");
</script>
</body>
</html>
EXPLANATION
1
This is the CSS code to style paragraphs in this document.
2
The first HTML paragraph element is given an
id
with the
id
attribute.
3
The second HTML paragraph element is also given an
id
.
4
The
getElementById()
uses the
id
of the paragraph to get a reference to the para-
graph. By applying the i
nnerHTML
property to this reference, all the text between
<p></p>
tags is assigned to the variable,
ptext1
.
5
By applying the i
nnerHTML
property to this reference, all the text between
<p></p>
tags is assigned to the variable,
ptext2
.
6, 7
The text in both paragraphs is displayed in uppercase letters by applying the
toUp-
perCase()
method to the variables,
ptxt1
and
ptxt2
. Figure 15.12 shows the result.
