Categories:

The styleSheet object

The "styleSheet" object lets you access external style sheets on the page, and to add or delete rules within one of them. Below lists all the properties and methods of the "styleSheet" object:

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.
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.
disabled Read/write property that specifies whether a stylesheet is disabled 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.
ownerRule For stylesheets that are defined using an @import rule, returns its CSSImportRule object. 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 style sheets, this property returns null.
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.

Two of the most important properties listed here are the CSS rules objects "cssRules[]" and "rules[]." They let you go on to manipulate existing CSS rules within a style sheet, in Firefox and IE, respectively. More on this on the following page.

And here are "styleSheet's" methods, for adding and removing CSS rules:

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 corresponding 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).
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.
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 NS6/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. NS6/Firefox only property.

As you can see, there's quite a lot of difference in syntax between Firefox and IE when it comes to adding/ removing rules. Even the parameters don't agree with one other.

Example- adding and removing CSS rules

In the below example, I'll reference the first style sheet on the page, then remove the last rule before finally adding a new one to it:

<style type="text/css">
b{color: orange;}

b{background-color: yellow;}
</style>

<script type="text/javascript">

var mysheet=document.styleSheets[0]
var totalrules=mysheet.cssRules? mysheet.cssRules.length : mysheet.rules.length
if (mysheet.deleteRule){ //if Firefox
mysheet.deleteRule(totalrules-1)
mysheet.insertRule("b{background-color: lime;}", totalrules-1)
}
else if (mysheet.removeRule){ //else if IE
mysheet.removeRule(totalrules-1)
mysheet.addRule("b", "background-color: lime")
}

</script>

There are two rules in the above CSS. When the script is run, the second one will be removed, replaced with a new rule inserted in the same position to cause the bold text to have a background color of lime.

Ok, time to move on and see how to refine our ability to manipulate an external style sheet, such as looking up a specific CSS rule, modifying its values etc. For that we need the help of the css Rules objects and their properties and methods.