Categories:

JavaScript Kit > DOM Reference > Here

DOM StyleSheet Object

Last updated: Februrary 27th, 2006

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)
//this style sheet is included using the @page rule

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%")
document.styleSheets[1].addRule("div", "border: 1px solid black", 0) //add rule to start of stylesheet

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
var mysheet=document.styleSheets[0]
for (i=0; i<mysheet.rules.length; i++){
if (mysheet.rules[i].selectorText=="P SPAN")
mysheet.removeRule(i)
}

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


Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.