HTML and CSS Reference
In-Depth Information
Figure 14-64
properties of the stylesheet object
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
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;}
then the object reference
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 );
Search WWH ::

Custom Search