Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 1013

Figure 14-64 properties of the stylesheet object

Property Description

styleSheet .cssText

The text of the style declarations in styleSheet (Internet Explorer only)

styleSheet .disabled

A Boolean value indicating whether styleSheet is disabled ( true ) or
enabled ( false )

styleSheet .href

The URL of styleSheet ; for embedded style sheets, the value of href is
an empty text string [read-only]

styleSheet .media

A text string containing the list of media types associated with
styleSheet [read-only]

styleSheet .rules

Returns the collection of rules within styleSheet (Internet Explorer only)

styleSheet .cssRules

Returns the collection of rules within styleSheet

styleSheet .title

The title of styleSheet [read-only]

styleSheet .type

The MIME type of styleSheet [read-only]

At the time of this writing, all current browsers support the styleSheets object
collection—but there are some important differences in how they implement their sup-
port. For example, the Google Chrome browser collapses all active style sheets into a
single object; as a result, a Web page with several external style sheet files would have
only one object in the styleSheets collection. Thus, at the current time, it is best to
modify the attributes of the link element instead of working with the styleSheets
collection.

Scripting Style Sheet Rules
Each styleSheet object in the styleSheets collection contains the object

styleSheet .cssRules
to reference individual rules within the style sheet, where styleSheet is a styleSheet
object. For example, if the first style sheet on a Web page contained the declarations

<style type=”text/css”>
h1 {color: red;}
h2 {color: blue;}
</style>
then the object reference

document.styleSheets[0].cssRules[0]
would refer to the style sheet declaration h1 {color: red;} . In the Internet Explorer
document object model before IE9, style sheet rules are referenced using the following
object collection: styleSheet .rules
JavaScript also uses the method

styleSheet .insertRule( rule );
to add new rules to the style sheet, where rule is a text string of the style rule. For
example, the following command inserts a new style rule for h3 elements in the first
styleSheet object in a document:

document.styleSheets[0].insertRule(“h3 {color: green;}”);
Under the IE DOM, this command is invoked using the addRule() method.
Finally, to delete an existing style rule, use the command

stylesheet .deleteRule( index );