JavaScript Kit > DOM Reference > Here
DOM CSS Rule Object
The CSS Rule object of the StyleSheet object allows you to access and modify the individual rules of a stylesheet. IE and Firefox varies in their implementation of the CSS Rule object, though luckily, the difference is mainly in the syntax:
document.styleSheets[0].cssRules[0] //access the first
rule in Firefox
document.styleSheets[0].rules[0] //access the first rule in IE Win
CSS Rule Object
As mentioned, IE and Firefox relies on two different CSS Rule objects to access a stylesheet's rules. Below lists the two objects:
Properties | Description |
---|---|
cssRules[] | DOM2 based CSS Rule object. Supported in NS/ Firefox. |
rules[] | IE's CSS Rule object. Example(s): if (document.styleSheets[0].cssRules) |
Properties
Properties | Description |
---|---|
cssText | Returns the content of a
css rule in its entirety, from the selector to the corresponding CSS
declaration(s). NS/Firefox only. A useful property to
easily search within a rule, by looking at both the selector and
attributes of a rule all at once. Example(s): if
(document.styleSheets[0].cssRules[0].cssText.indexOf("float")!=-1) |
length | Returns the length of the CSS Rule object (cssRules.length or rules.length), in other words, the number of rules within a stylesheet. |
parentStyleSheet | Returns the styleSheet object that contains the current rule. |
selectorText | Read/write property that returns the selector part
of a rule. Setting this property yields unpredictable results in
both Firefox and IE. Example(s): var mysheet=document.styleSheets[0] |
style | The "style" object of the css rule object provides
read/write access to individual attributes defined in the rule,
similar in fashion to the "style" object of inline styles. Example(s): var mysheet=document.styleSheets[0] |
DD CSS Library
Free CSS menus and codes to give your site a visual boost.