On this page I test style sheet access.

This page links to four style sheets - you'll note that some elements have different colors than elsewhere on this site:

  1. To the usual quirksmode.css which I use throughout my entire site
  2. To testsyles.css, special styles for all W3C DOM tests
  3. To specialstyle.css, a test sheet for most tests on this page
  4. To importtest.css, which in turn imports import.css. This style sheet is for the test of the imports property.

Test elements

This is a test pre.

Test scripts

In these tests I make sure each browser uses cssRules or rules, whichever array it supports. Obviously, the only exceptions are the tests that check for support of rules or cssRules.


Test alert(document.styleSheets.length)

Correct: 4

rules and cssRules

Test alert(document.styleSheets[2].cssRules.length)
Test alert(document.styleSheets[2].rules.length)

Correct: 4


Test alert(document.styleSheets[3].imports.length)

Correct: 1


Test alert(document.styleSheets[2].{cssrules}[0].selectorText)

Correct: pre


Test alert(document.styleSheets[2].cssText)
Test alert(document.styleSheets[2].{cssrules}[0].cssText)
Test alert(document.styleSheets[2].{cssrules}[0].style.cssText)


Test alert(document.styleSheets[2].{cssrules}[0].style.color)
Test alert(document.styleSheets[2].{cssrules}['h2'].style.color)
Test document.styleSheets[2].{cssrules}[0].style.color = '#0000cc'

{cssrule}[0]: pre


Test alert(document.styleSheets[2].href)
Test document.styleSheets[0].href = '../../js/oldstyles.css'

Correct: specialstyle.css


Test alert(document.styleSheets[2].disabled)
Test document.styleSheets[2].disabled = true


Test alert(document.styleSheets[2].ownerNode.nodeName)
Test alert(document.styleSheets[2].{cssrules}[1].parentRule)
Test alert(document.styleSheets[2].{cssrules}[1].parentStyleSheet)