18

I wonder why does my script work on firefox but not on google chrome

JS:

var _timelineWidth = (Number.parseInt(document.styleSheets[0].cssRules[16].style.width) / 100) * document.body.clientWidth;

CSS:

#timeline {
  position: relative;
  top: 15px;
  left: 12.5%;
  height: 5px;
  background: #aaa;
  border-radius: 2.5px;
  cursor: pointer;
}

here's the error code from chrome

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Saeed
  • 5,413
  • 3
  • 26
  • 40
Kemal Dwiheldy
  • 409
  • 1
  • 4
  • 14
  • Possible duplicate of [External CSS styles cant be accessed in Google Chrome](https://stackoverflow.com/questions/24472352/external-css-styles-cant-be-accessed-in-google-chrome) – Thum Choon Tat Apr 24 '18 at 04:51
  • The array index you referring may not be in the list. Please check that – Abi Apr 24 '18 at 05:03
  • Should use `getComputedStyle` instead. – Lewis Apr 24 '18 at 05:22
  • Possible duplicate of [document.styleSheets\[x\].cssRules are null](https://stackoverflow.com/questions/46356349/document-stylesheetsx-cssrules-are-null) – winhowes Apr 24 '18 at 05:35

2 Answers2

26

In latest Chrome, CORS security rules are applicable for style-sheets also (Similar to Iframe rules).

You can load and render them but, cannot access the content through javascript (If loaded from Cross-Domain ).

If your CSS Stylesheet is from Same domain as of HTML /or included in same HTML file, you will be able to access document.styleSheets[elem].cssRules otherwise it will throw error 

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Cross Domain Stylesheet

Cross Domain Stylesheet

Same Domain Stylesheet

Same Domain Stylesheet

Atul Sharma
  • 9,397
  • 10
  • 38
  • 65
  • 1
    I'm using an external CSS, and haven't uploaded it anywhere, why it wouldn't work?? – Kemal Dwiheldy Apr 27 '18 at 16:05
  • 1
    Check the URL.. Both html and stylesheet domain's must be same.. Be it localhost or filesystem. – Atul Sharma Apr 27 '18 at 16:28
  • Thanks for answer @AtulSharma Could you also suggest ways to access the content as well. – anchal20 Nov 22 '18 at 09:58
  • @anchal20 you cannot modify class from external stylesheet in Chrome. Though, you can make a copy of classes which needs modification to your main file or override them in your code thorough JS or directly manipulate the html elements. – Atul Sharma Nov 22 '18 at 15:05
  • @AtulSharma Shouldn't this be able to work on localhost? I have index.html and style.css in the same directory and I'm getting the error in Firefox. I don't remember seeing this error before today though so I'm a bit confused – 1.21 gigawatts Dec 06 '22 at 22:43
19

You can add crossorigin="anonymous" to prevent the error.

<link rel="stylesheet" href="https://..." crossorigin="anonymous">

More info here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

This will create a potencial cors request but the server must respond with Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: <authorized-domain>.

You can check here to see how to add CORS support to your server.

For more information about CORS you can read this and this.

Paulo Belo
  • 3,759
  • 1
  • 22
  • 20
  • Hmm... this doesn't seem to actually work, at least in Chrome – Daniel Miller May 25 '21 at 12:52
  • @DanielMiller, you might be right. While it solved my problem, I guess with was dependent on the server response header. I've updated my answer to reflect this. – Paulo Belo May 26 '21 at 16:02
  • 2
    I use Chrome, too, and add ``crossorigin="anonymous"`` indeed fixes my problem. – Carson Jul 02 '21 at 07:45
  • This does work, but I had a different approach in order to solve what I was trying to do https://stackoverflow.com/questions/71327187/cannot-access-cssrules-for-stylesheet-cors/71327476#71327476 – Nikster Mar 02 '22 at 18:30