HTML and CSS Reference
In-Depth Information
EXPLANATION
1
The first style sheet is imported. This will be
styleSheets[0]
in the JavaScript array.
The second style sheet is defined on line 8.
2
This user-defined function will be called when the user clicks the first radio button.
3
By setting the
disabled
property of the
styleSheet
object to
false
,
styleSheets[0]
will
become visible. In this example the style for the whole page will be changed ac-
cording to the rules in the first style sheet that was imported.
4
Setting the second style sheet,
styleSheets[1]
to
true
, makes this style sheet invisible.
5
This function sets
styleSheets[1]
to
false
, making it visible. This style is defined on
line 8.
6
The
cssRules[]
array contains all the rules set for the style sheet. In the style sheet
defined on line 8, the second rule,
cssRules[1]
, defines a rule for an
h1
element.
For this rule, the rule is changed to a different color using the document's
styleSheet
array and the
cssRules
array with the
style
property, and the color is reset
to purple.
7
To change the rule of a style sheet with Microsoft, use the
rules[]
array as shown
here.
8
This is an embedded style sheet that styles the
p
and
h1
selectors.
9
The form gives the user two radio buttons, one to make the first style visible, and
one to make the second style visible and change one of the rules.
10
This is the paragraph that will be given a new style if the “change style” option in
the radio button is selected by the user. See Figures 14.30, 14.31, and 14.32.
Figure 14.30
The page as it first appears.
