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:
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.
Search WWH ::

Custom Search