HTML and CSS Reference
In-Depth Information
EXAMPLE
15.2 (
CONTINUED
)
<script name="text/javascript">
4
var h1tag=document.getElementById("head1");
5
var bodytag=document.getElementById("body1");
6
var paratag = document.getElementById("para1");
7
h1tag.style.fontFamily="verdana";
h1tag.style.fontSize="32";
h1tag.style.color="darkgreen";
paratag.style.fontSize="125%";
paratag.style.color="blue";
bodytag.style.backgroundColor="silver";
8
document.write(h1tag +"<br />");
document.write(paratag+"<br />");
document.write(bodytag+"<br /><br />");
//
Let's get the text between the tags
document.write("<h2>This is the text within
the tags:</h2>");
9
document.write(h1tag.childNodes[0].nodeValue+"<br />");
document.write(paratag.childNodes[0].nodeValue+"<br />");
</script>
</big>
</p>
</body >
</html>
EXPLANATION
1
The
<body>
tag is given an
id
called
“body1”
.
2
The
<h1>
tag is given an
id
called
“head1”
.
3
The
<p>
tag is given an
id
called
“para1”
.
4
In the JavaScript program, the
getElementById()
method returns a reference to an
h1
element, and assigns that value to the variable called
h1tag
.
5
The
getElementById()
method returns a reference to a
BODY
element, and assigns
that value to the variable called
bodytag
.
6
The
getElementById()
method returns a reference to a
p
element, and assigns that
value to the variable called
paratag
.
7
Now, by using the
style
property, the elements are assigned new values for font size
and color, causing them to change dynamically.
8
The value returned by the
getElementById()
method is displayed for each of the
elements. As shown in the output, each one of these HTML elements is an object.
See Figure 15.9.
