x.currentStyle

Returns the actual style of element x, even if this is not an inline style. It thus reports the result of all style declarations that work on element x.

window.getComputedStyle(x,null).color

Read out the current color style of element x. All units are converted to pixels first.

x.style

Access the inline styles of element x. Styles defined in embedded, linked or imported style sheets are not reported.

You can also set it: x.style.color = '#0000cc'. This sets the inline style, which of course overrules all other styles.

• Konqueror has trouble with reading out the border style that I use in my test. However, in general style works correctly in both browsers.
• IE5.5 and 6 have problems with setting the new border rule, but I suspect that's caused by my template and not by the actual test. In general they support style changes well.

x.style = 'font-size: 150%'

Change the inline styles to only font-size: 150%.

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

Access the styles in the first rule of the second style sheet. These, too, can be set:
document.styleSheets[1].cssRules[0].style.color = '#0000cc'

(IE uses rules instead of cssRules, obviously.)

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.