HTML and CSS Reference
In-Depth Information
To begin creating the changeStyle() function:
◗
1.
At the bottom of the
switchstyle.js
file, insert the following code as shown in
Figure 14-62:
function changeStyle(sheet) {
/* Loop through all of the link elements */
var links = document.getElementsByTagName(“link”);
for (var i = 0; i < links.length; i++) {
/* Pick out only the links from preferred or
alternate style sheets */
if ( (links[i].rel == “stylesheet” ||
links[i].rel == “alternate stylesheet”) &&
links[i].hasAttribute(“title”) ) {
}
}
}
Figure 14-62
looping through the links collection
link must h
a
ve
the title attribute
rel attribute must be either
"stylesheet" or "alternate stylesheet"
◗
2.
Save your changes to the file.
For every preferred or alternate style sheet, the function should test whether the value
of the
title
attribute matches the value of the
sheet
parameter. If the two match, the
function should change the
disabled
property of the link to
false
—enabling the style
sheet in the document—and the function should set the
disabled
property for all other
style sheets to
true
. After looping through the links collection, only the preferred or
alternate style sheet specified by the user will be enabled in the document. You'll add
code to accomplish this now.
