Firefox not able to enumerate document.styleSheets[].cssRules[]

Question

Here is the code:

• http://jsfiddle.net/salman/2hyYg/
• http://jsfiddle.net/salman/2hyYg/show/

You\'ll notice the alert(document.styl

Answer 1

You are loading css-files from another domain, I guess that you are not allowed to modify cssRules for externally loaded css files.

see this: Accessing cross-domain style sheet with .cssRules

Answer 2

The stylesheet is there and works fine, you just cannot access the cssRules property of the stylesheet because it is set to null by the browser.

The security error you get is due to the same origin policy - you are working on stylesheets from another domain, you will not have this problem if the stylesheets are hosted on the same domain your webpage is.

Answer 3

You can put the failing line in a try-catch block. That's how i solved the same issue on one project.

Answer 4

As of 2013, you can set the "crossorigin" attribute on the <link>-Element to signal the browser that this CSS is trusted (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link).

After that, you can access its rules via Javascript.

Answer 5

You can get that error when trying to read a stylesheet loaded from a different domain or server, or trying to read an @import rule.

For your purpose, just check the document.styleSheets.length .

Answer 6

Try window.document.styleSheets[x].cssRules.length instead of document.styleSheets[x].cssRules.length. It will work on firefox without any security exception.