Search code examples
cssstylesheet

document.styleSheets[x].cssRules are null


When I inspect a website,
I see the cssRules from document.styleSheets[x].cssRules

enter image description here

However, with this website stackoverflow.com, when I inspect with Chrome browser, I see document.styleSheets, but cssRules is null.

enter image description here

How come this is possible?


Solution

  • That's because the style sheets are coming from a different domain. Some browsers (such as Chrome) implement strict cross-domain policies by throwing security errors or setting the cssRules and ownerRule to null when it comes from a different domain...in your case the style sheets come from a CDN

    MDN quotes the following in the CSSStyleSheet documentation...

    In some browsers, if a stylesheet is loaded from a different domain, calling cssRules results in SecurityError.

    https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet