JavaScript Examples Bible - UserWorks Technologies

440
ruleObject.style
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
Compatibility ✓ ✓ ✓ ✓
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to examine the
selectorText property of rules in the first styleSheet object of the page. Enter
each of the following statements in the top text box:
document.styleSheets[0].rules[0].selectorText
document.styleSheets[0].rules[1].selectorText
Compare these values against the source code view for the STYLE element in the
page.
style
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓ ✓
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to modify a style property
of one of the styleSheet rules in the page. The syntax shown here is for IE4+,
but you can substitute the cssRules reference for the rules collection reference in
NN6 (and IE5/Mac) if you like.
Begin by reloading the page and making sure the style sheet is enabled. Enter the
following statement into the top text box:
document.styleSheets[0].disabled = false
The first rule is for the myP element on the page. Change the rule’s font-size
style:
document.styleSheets[0].rules[0].style.fontSize = “20pt”
Look over the style object properties in the discussion of the style object
later in this chapter and have fun experimenting with different style properties.
After you are finished, reload the page to restore the styles to their default states.
✦ ✦ ✦