styleSheets

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.

document.styleSheets

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

imports

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

Correct: 1

selectorText

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

Correct: pre

cssText

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

{css}rules.style

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

href

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

Correct: specialstyle.css

Disabled

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

Miscellaneous

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