JavaScript Kit > DOM Reference > Here
DOM StyleSheet Object
The DOM styleSheet object contains all the external style sheets on the page, either defined using the <style> or <link rel="stylesheet"> tag. Using "styleSheet", you can add or delete rules within any stylesheet on the page. Its CSS Rule object allows you to modify an existing rule. In general, it's simpler and more efficient to access and modify an element's inline style than it is an external style sheet. However, at times the later may be called for.
document.styleSheets[0] //access the first external style sheet on the page
Properties
| Properties | Description |
|---|---|
| cssRules[] | Returns an array containing all the CSS rules of a
stylesheet. NS6+/Firefox only object. In IE (Win), use rules[]
instead. Via cssRules[] you can then add, delete or modify existing
rules within the stylesheet. Example: document.styleSheets[0].cssRules[1] //Access the 2nd rule of the first stylesheet on the page |
| cssText | Read/write property that contains the entire
contents of the stylesheet. IE only property. Note that
Firefox support a "cssText" property on individual rules
to return the contents of each rule. Example: document.styleSheets[0].cssText="" //essentially delete stylesheet in IE. |
| disabled | Read/write property that specifies whether a stylesheet is diabled or not. Default value is false. |
| href | Read/write property that specifies the URL of an external stylesheet. |
| media | Specifies the medium of the stylesheet. Default value is "screen." |
| ownerNode | References the document tree node that contains the current stylesheet. For regular HTML pages, ownerNode typically returns the LINK or STYLE element on the stylesheet. For XML, it may be the linking processing instruction. NS6+/Firefox only property. In IE, the equivalent is "owningElement". |
| ownerRule | For stylesheets that are defined using an @import rule, returns its CSSImportRule object. You can use the cssRules[] object to add or remove rules within the stylesheet. NS6+/Firefox only property. |
| owningElement | References the document tree node that contains the current stylesheet. IE only property. In NS6+/Firefox, the equivalent is "ownerNode". |
| parentStyleSheet | For stylesheets that are included on the page via
the @page rule,
parentStyleSheet references the top level stylesheet. For standard
LINK or STYLE stylehseets, this property returns null. Example(s): if (document.styleSheets[0].parentStyleSheet) |
| rules[] | Returns an array containing all the CSS rules of a stylesheet. IE only object. In NS6+/Firefox, use cssRules[] instead. Via rules[] you can then add, delete or modify existing rules within the stylesheet. |
| title | Returns the value of the title attribute of the stylesheet, if defined. |
| type | Returns the value of the type attribute of the stylesheet. |
Methods
| Methods | Description |
|---|---|
| addRule(selector, declaration, [index]) | IE exclusive method that adds a new rule to
the stylesheet, where the parameter "selector" is the rule's
selector text (ie: "p", "div b" etc), and "declaration" is the
rule's properties and coresponding values(ie: "background-color:
yellow; color: brown"). An optional "index" parameter (integer) lets
you specify the position of the new rule within the stylesheet,
whereby 0 for example would insert the new rule as the very first
one (default is -1, which adds the new rule to the end of the
stylesheet). Example(s): document.styleSheets[0].addRule("p .myclass", "font-size: 120%") |
| removeRule([index]) | IE exclusive method that removes the first
rule of a stylesheet. Enter an optional index (integer) to remove a
specific rule based on its position in the rules[] collection. Example(s): //Remove any rules with "P SPAN" as its selector text from the
stylesheet |
| deleteRule(index) | Removes a rule from the stylesheet based on its position in the cssRules[] collection. Use the parameter "index" (integer) to specify this position. DOM2 NS/Firefox only property. |
| insertRule(rule, index) | Inserts a new rule to the stylesheet, where the
parameter "rule" is a string containing the entire rule to add (ie:
#myid{color: red; border: 1px solid black}), and "index", an integer
specifying the position within cssRules[] to insert the new rule. NS/Firefox only
property. Example(s): document.styleSheets[0].insertRule("p{font-size: 20px;}", 0) //add new rule to start of stylesheet |
DD CSS Library
Free CSS menus and codes to give your site a visual boost.