document.styleSheets[1].cssRules[1]

Access the second rule of the second style sheet in the document.

document.styleSheets[1].imports

Access all style sheets that are imported by the second style sheet in the document.

document.styleSheets[1].rules[1]

Access the second rule of the second style sheet in the document.

rules does not contain @import declarations, while cssRules does.

• IE doesn't count @imports as rules, but splits up selectors like p#test, ul into two rules. This behaviour persists in IE9, although cssRules works correctly.

document.styleSheets[1]

Access the second style sheet (linked or embedded) in the document.

document.styleSheets[1].addRule('pre', 'font: 14px verdana')

Add the rule pre {font: 14px verdana} to the second style sheet in the document.

document.styleSheets[1].deleteRule(1)

Delete the second rule of the second style sheet in the document.

var x = document.styleSheets[1];
x.insertRule('pre {font: 14px verdana}',x.cssRules.length)

Insert the rule pre {font: 14px verdana} into the second style sheet in the document at the last position (length of the cssRules array).

Unfortunately the second argument is required. It should default to cssRules.length.

document.styleSheets[1].removeRule(1)

Remove the second rule from the second style sheet in the document.

x.style.cssText

Returns the entire inline style of element x.

document.styleSheets[1].cssText

Returns the entire content of the style sheet.

document.styleSheets[1].cssRules[1].cssText

Returns the entire text of the rule (for instance pre {font: 14px verdana;}).

(Obviously, IE needs rules instead of cssRules.)

document.styleSheets[1].cssRules[1].style.cssText

Returns all declarations of the rule (for instance font: 14px verdana;).

(Obviously, IE needs rules instead of cssRules.)

document.styleSheets[1].disabled = true

Disable the second style sheet of the document. (Setting it to false enables the style sheet again).

document.styleSheet[0].href

Get the href of the style sheet. This is a relative path in IE; a complete URL in all other browsers.

• IE up to 8 allows you to change the href.

document.styleSheets[1].cssRules[1].selectorText

Get the selector text of the second rule in the second style sheet in the document.

Note that some browsers return UPPER CASE selector texts even when the style sheet contains lower case selectors. Use selectorText.toLowerCase() for all your comparisons.

• Opera allows you to set the selectorText.
• IE splits all comma selectors into several rules (p#test, li becomes two rules, one for p#test, one for li). This is not counted as a bug in this test; IE shows the correct selectorText according to its own rules.
• IE9, however, persists in this behaviour even though it support for cssRules is supposed to be standards compliant and thus return p#test, ul. What it returns, however, is p#test. I assume this is a bug in the selectorText implementation, and not in the actual style sheet (i.e. the rule does apply to both p#test and ul.)

document.createStyleSheet('extrastyle.css')

Create an extra style (sheet) and append it to the styleSheets[] array.

document.styleSheets[1].cssRules[1].style.getPropertyPriority('color')

Returns important when the style is marked !important. Returns an empty string otherwise.

(Obviously, IE needs rules instead of cssRules.)

document.getElementById('test').style.getPropertyValue('color')
document.styleSheets[1].cssRules[1].style.getPropertyValue('color')

Get the color declaration of the style object. This works on all style objects. Of course, reading out style.color is much easier.

document.styleSheets[1].ownerNode

Access the owner node of the style sheet, usually a <link> or a <style> tag.

document.styleSheets[1].cssRules[1].parentStyleSheet

Access the parent style sheet of the rule, which is once again document.styleSheets[1].

document.styleSheets[1].cssRules[1].style.removeProperty('color')
document.getElementById('test').style.removeProperty('color')

Remove the color declaration from the second rule of the second style sheet on the page or the element with ID="test".

• Opera refuses to remove the last remaining property of a rule.

x.style.setProperty('color','#00cc00',null)
document.styleSheets[1].cssRules[1].style.setProperty('color','#00cc00',null)

Set the color of x or the second rule in the second style sheet to green.

As usual, the null is required. (Default values, anyone?) You can also use important instead.