HTML and CSS Reference
In-Depth Information
◗
2.
Scroll up to the top of the file. Directly below the
script
element to access the
toc.js
file, insert the following
script
element to access the
switchstyle.js
file:
<script src=”switchstyle.js” type=”text/javascript”></script>
◗
3.
Save your changes to the file, and then use your text editor to open the
switchtxt.js
file from the tutorial.14\tutorial folder. Enter
your name
and
the
date
in the comment section of the file, and then save the file as
switchstyle.js
.
◗
4.
Refresh or reload the
usconst.htm
file in your browser. Verify that three buttons
appear under the main document title as shown earlier in Figure 14-59. Note that
the display styles for the buttons already have been created for you by Norene.
To create the changeStyle() function, you must work with the properties and attributes
of the
link
element.
Working with the
link
Element
So far, you've worked only with the nodes found within the body of a Web page. You
also can access and modify the collection of
link
elements found in a document's head
by using the following object reference:
document.getElementsByTagName(“link”)
From this object collection, you want to extract only those links used for preferred or
alternate style sheets. In other words, the
link
element's
rel
attribute must be equal to
either
stylesheet
or
alternate stylesheet
, and it also must have a
title
attribute value.
The following code provides a
for
loop that goes through all of the
link
elements in
a document, using an
if
condition to select only those links that represent preferred or
alternate style sheets:
var links = document.getElementsByTagName(“link”);
for (var i = 0; i < links.length; i++) {
if ( (links[i].rel == “stylesheet” ||
links[i].rel == “alternate stylesheet”) &&
links[i].hasAttribute(“title”) ) {
}
}
You'll add this code to the changeStyle() function that you'll begin creating now.
