Categories:

The CSS Rule object

The CSS Rule object of the styleSheet object lets you access and modify the individual rules of a stylesheet. Recall that the "stylesheet" object provides methods to add or remove rules, but not modify an existing one. Since IE and Firefox varies in their implementation of the CSS Rule object itself, lets start by creating a cross browser CSS rule object:

if (document.styleSheets[0].cssRules)
crossrule=document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
crossrule=document.styleSheets[0].rules

'crossrule" now references the CSS rule object for the first style sheet on the page, in both Firefox and IE. With that done, time to look at what we can do with this object, via its properties:

Properties Description
cssText Returns the content of a css rule in its entirety, from the selector to the corresponding CSS declaration(s). NS6+/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.
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 Returns the selector part of a rule.
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.

To demonstrate these properties in action, I'll use a simple style sheet:

<style type="text/css">

b{
color: orange;
font-size: 110%;
}

a:hover{
background-color: yellow;
}

#test{
border: 1px solid black;
}

</style>

Searching for a particular CSS rule

The below example searches for the "a:hover" rule within the style sheet, and if found, returns a reference to it:

var mysheet=document.styleSheets[0]
var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules
for (i=0; i<myrules.length; i++){
if(myrules[i].selectorText.toLowerCase()=="a:hover"){ //find "a:hover" rule
targetrule=myrules[i]
break;
}
}

Since IE capitalizes the selectorText portion, I convert it to lower case first.

Modifying a CSS rule's attribute

The first CSS rule ("b") contains two attributes. Lets change the color attribute from "orange" to "red":

var mysheet=document.styleSheets[0]
var firstrule=mysheet.cssRules? mysheet.cssRules[0]: mysheet.rules[0]
if (firstrule.style.color=="orange")
firstrule.style.color="red"

In both IE and Firefox, you can actually use the "style" object to set an attribute that doesn't yet exist in the rule, though from testing, Opera 8 doesn't support this (the attribute must already exist).

Replacing an entire CSS rule

Last but not least, lets delete any rule(s) with "#test" as part of its selector, whether it's "#test", "div #test" etc:

var mysheet=document.styleSheets[0]
var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules
mysheet.crossdelete=mysheet.deleteRule? mysheet.deleteRule : mysheet.removeRule
for (i=0; i<myrules.length; i++){
if(myrules[i].selectorText.toLowerCase().indexOf("#test")!=-1){
mysheet.crossdelete(i)
i-- //decrement i by 1, since deleting a rule collapses the array by 1
}
}

Here any rules with "#test" in its selector portion will be deleted, though in our case above, that means just the last rule.

In conclusion

You now have all the information needed to access and modify external style sheets, whether they're defined using the <style> or <link> tag. But no need to get clever- if it can be done by changing the inline style of an element, do that instead. :)