E xamples in this chapter focus on the properties and methods of the s t y l eSheet object. As described in
Chapter 30 of the JavaScript Bible, object models th a t support scriptable style sheets define both the STYLE element object (representing the element created w ith a <STY LE> tag pair) and the more abstract S t y l e s h e e t object. The la tte r may be created by virtu e of a STYLE element o r perhaps im ported from an external style sheet definition file.
Use the s t y ! eSheet object to gain access to the details of the rules defined for a given style sheet. M ethods of the S t y l e s h e e t object (different syntax for IE4+ and W3C object models) allow dynamic creation o r deletion of rules w ith in a style sheet. Properties of the s t y l eSheet object (again, dif
ferent syntax) return arrays of objects representing the style rules contained by the style sheet. The rule objects them selves have properties allowing reading and w ritin g of rule selectors and even individual style attributes w ith in tha t rule (since a single rule can lis t m ultiple style attributes).
Examples Highlights
♦ Compare examples fo r the s t y l e Sh e e t . cssRul es and S t y l e s h e e t . r u l e s properties to see how different browsers provide access to arrays of rule objects.
♦ You can observe in The Evaluator (Chapter 13 in the JavaScript Bible) how the s t y l e S h e e t . d i s a b l e d prop
e rty can sw itch a style sheet on and off dynamically.
♦ Compare the S t y l e s h e e t object method pairs for inserting and deleting rules to an existing style sheet.
The walk-through examples let you follow the same steps for both the IE4+ and NN6 syntaxes.
♦ ♦ ♦ ♦
In This C ha p te r Enabling and disabling entire style sheets
Accessing an individual style rule from a style sheet A dding and deleting style sheet rules
♦ ♦ ♦ ♦
♦ The final example in this chapter demonstrates how scripts can m odify a single a ttribu te of a style sheet rule.
4 3 6 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
The syntax in the dem onstration is for NN6 and IE5/Mac, but referencing the
c s s R u l e s p ro p e rty provides the same access for the IE4+ object model.
styleSheet Object
Properties
cssRules
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility / ( / ) ( / )
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to look at the c s s R u l es
p ro p e rty in NN6+ o r IE5+/Mac. First, view how many rules are in the firs t styleSheet object of the page by entering the follow ing statement in to the top text box:
document.sty1eSheets[0].cssRules.length
Now use the array w ith an index value to access one of the rule objects to view the rule object’s properties list. Enter the follow ing statement in to the bottom text box:
document.sty1eSheets[0].cssRules[l]
You use this syntax to m odify the style details of an individual rule belonging to the styleSheet object.
cssText
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility ✓ ✓
Example
Use The Evaluator (Chapter 13) to replace the style rules in one blast via the
cs s T e x t property. Begin b y examining the value returned from the p roperty for the in itia lly disabled style sheet by entering the follow ing statement into the top text box:
document.sty1eSheets[0].cssText
Next, enable the style sheet so tha t its rules are applied to the document:
document.styleSheets[0].disabled = false
styleSheetObject.cssợext
Chapter 14 ♦ style Sheet Objects (Chapter 30) 4 3 7
Finally, enter the follow ing statement into the to p text box to overw rite the style sheet w ith entirely new rules.
document, styl eSheets[0] .cssText = "P (colonred)"
Reload the page after you are finished to restore the original state.
di sabled
NN2 NN3 NN4 NN6 1E3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility / / / /
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible ) to toggle between the enabled and disabled state of the firs t Stylesheet object on the page. Enter the fol
lowing statement into the top text box:
document.styleSheets[0].disabled = ( ¡document.styleSheets[0].disabled)
The inclusion of the NOT operator ( ! ) forces the state to change from t r u e to
f a l s e o r f a l s e t o t r u e w ith each click of the Evaluate button.
ownerNode
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om patibility /
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) w ith NN6 to inspect the
o w n e r N o d e of the firs t Stylesheet object in the document. Enter the follow ing state
ment into the top text box:
document.styleSheets[0].ownerNcde.tagName
The returned value is the STYLE element tag name.
owni ngElement
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility y y y
sfy/eS/jeef06/ecf.o w n in gE lem en t
4 3 8 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
Example
Use The Evaluator (Chapter 13 in JavaScript Bible ) w ith IE4+ to inspect the o w n i n g E l e m e n t of the firs t Stylesheet object in the document. Enter the follow ing statement in to the top text box:
document.styleSheets[0].owni ng El ement.tagName The returned value is the STYLE element tag name.
rul es
NN2 NN3 NN4 NN6 IE3/J1 1E3/J2 IE4 IE5 IE5.5
C om pa tib ility / / /
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) w ith IE4+ to examine the
r u l e s p ro p e rty of the firs t Stylesheet object in the page. First, find out how many rules are in the firs t Stylesheet object by entering the follow ing statement in to the to p text box:
document. styleSheets[0]. rules .length
Next, examine the properties of one of the rules by entering the follow ing state
ment into the bottom text box:
document. sty1eSheets[0]. rul es[l ]
You now see the all the properties tha t IE4+ exposes fo r a rule object.
Methods
addRule( "selector", " styleSpec "[, index ]) removeRule( index )
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility / / ✓
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible ) w ith IE4+ to add a style sheet rule to the firs t Stylesheet object of the page. First, make sure the style sheet is enabled b y entering the follow ing statement into the top text box:
document.styleSheets[0].disabled = false
styleSheetObject.addRu\e()
Chapter 14 ♦ style Sheet Objects (Chapter 30) 4 3 9
Next, append a style that sets the color of the TEXTAREA element:
document. sty1eSheets[0]. addRule("TEXTAREA", "color: red” )
Enter any valid object (such as d o c u m e n t . body) in to the bottom text box to see how the style has been applied to the TEXTAREA element on the page.
Now remove the style, using the index of the last item of the rul es collection as the index:
document. sty 1 eSheets[0]. removeF.ul e( document .sty leSheets[0]. rul es. 1 ength - 1) The text in the TEXTAREA returns to its default color.
deleteRule( index )
insertRule(" rule " , index )
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility /
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) w ith NN6+ to add a style sheet rule to the firs t Stylesheet object of the page. First, make sure the style sheet is enabled by entering the follow ing statement into the top text box:
document.styleSheets[0] .disabled = false
Next, append a style that sets the color of the TEXTAREA element:
document. sty 1 eSheets[0]. i nsertF.ul e( "TEXTAREA {col or: red I", document.styleSheets[0].cssRul€S.1ength)
Enter any valid object (such as d o c u m e n t . body) in to the bottom text box to see how the style has been applied to the TEXTAREA element on the page.
Now remove the style, using the index of the last item of the rules collection as the index:
document. sty 1 eSheets[0] .del eteF.ul e( document .sty 1eSheets[0] .cssRul es. 1 ength - 1) The firs t release of NN6 processes most, but not all, of the internal actions in response to the del eteRul e ( ) method. The method returns no value, so the Results box co rrectly reports u ndef i ned after evaluating the del eteRul e ( ) example statement. A t the same time, the method has genuinely removed the rule from the Stylesheet object (as proven by inspecting the le ngth p roperty of the document. s t y l e S h e e t s [ 0 ] . cssRul es array). But the browser does not refresh the page display to reflect the removal of the rule.
sfy/eSAeefO A/ecf.deleteRuieO
4 4 0 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
cssRule and rule Objects
Properties
selectorText
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility / / / /
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to examine the
sel e c t o r T e x t p ro p e rty of rules in the firs t styleSheet object of the page. Enter each of the follow ing statements in the top text box:
d o c u m e nt .s ty le Sh eet s[ 0].rules[C].selectorText d o c u m e n t .styl e S h e e t s [ 0 ] .ru l e s[ l].selectorText
Compare these values against the source code view for the STYLE element in the page.
styl e
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
C om pa tib ility / / / ✓
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to m odify a s t y l e prop
e rty of one of the styleSheet rules in the page. The syntax shown here is fo r IE4+, but you can substitute the c s s R u l es reference fo r the rul e s collection reference in NN6 (and IE5/Mac) if you like.
Begin b y reloading the page and making sure the style sheet is enabled. Enter the follow ing statement into the top text box:
document.styleSheets[0].disabled = false
The firs t rule is fo r the m y P element on the page. Change the rule’s f o n t - s i z e
style:
d o c u m e n t .s t yl eS he et s[ 0].ru l e s[ C].style.fontSize = "20pt"
Look over the s t y l e object properties in the discussion of the styl e object later in this chapter and have fun experim enting w ith different style properties.
A fter you are finished, reload the page to restore the styles to th e ir default states.
♦ ♦ ♦
ruleObject. style
The NN4