Why Chrome cannot access to external stylesheet using insertRule with Javascript?

Question

I have a HTML file, and linked in the head, an external stylesheet, and both of them are in the same folder. There are only one stylesheet. In the bottom of the body, i have a script:

document.styleSheets[0].insertRule(".example{position: relative}", 0);

But i get this error message (suprisingly only on Chrome 64, on FireFox, Safari mobile and Chrome mobile works well):

Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

Why?

@TemaniAfif - doesn't apply any longer (that was from 4 yrs ago) — Randy Casburn
– Randy Casburn, Commented Mar 4, 2018 at 22:36
Have you checked your existing stylesheets to ensure that they are error-free? jigsaw.w3.org/css-validator — Scott Marcus
– Scott Marcus, Commented Mar 4, 2018 at 22:39
@RandyCasburn i simply linked a similar answer that may help ;) i never said it apply ... if it was the case i would have closed it as a duplicate :) — Temani Afif
– Temani Afif, Commented Mar 4, 2018 at 22:47
Is the stylesheet from the same origin? If not, that is what one can expect from Chrome going forward for everything. — Randy Casburn
– Randy Casburn, Commented Mar 4, 2018 at 22:49
@TemaniAfif - OK - but it is a complete different error message :-/ — Randy Casburn
– Randy Casburn, Commented Mar 4, 2018 at 22:50

Randy Casburn · Accepted Answer · 2018-03-04 23:22:50Z

1

Change the index for your insert. In CSS files all @ Rules must be at the top of the file. So, if you have 4 @ rules at the top of the CSS file, change the index to 4 thus:

document.styleSheets[0].insertRule(".example{position: relative}", 4);

That should work.

Here is the spec reference (see the note):

https://drafts.csswg.org/cssom/#insert-a-css-rule

edited Mar 4, 2018 at 23:22

answered Mar 4, 2018 at 23:15

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Gergő Horváth Over a year ago

I tried this solution, but with changing the order of the rules, the things get out of control. But i tried not to add a rule to the stylesheet, but only read it. I used this code: example.innerHTML = document.styleSheets[0].cssRules[0].cssText, and get the following error: Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Randy Casburn Over a year ago

Bummer - We know from the earlier Plunker that it works correctly with a simple model. It seems we've isolated this down to your stylesheet. I'm out of ideas.

Gergő Horváth Over a year ago

I tried with a very simple version. Looks like, the problem is with my Chrome.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>asd</title>     <link rel="stylesheet" href="style.css"> </head>  <body>     <h2>This</h2>     <script>         document.styleSheets[0].insertRule("h2{color: white}",0)     </script> </body> </html>

The CSS: h2{background-color: aqua} Same error: Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule But i tried, it works with internal stylesheet in the head.

Randy Casburn Over a year ago

@GergőHorváth I know this might sound odd, but please add a title attribute with a string to the <link> element and attempt your simple use case again.

Randy Casburn Over a year ago

that's the CORS problem. Anytime you want to load a URL from a web page that is loaded from the file system with the "file" protocol ( file:// ) the origin of that document is "null". So even loading a resource from localhost (the same machine) is a different origin. If you have python: open a shell or command prompt in the folder where the HTML file is and execute: python -m SimpleHTTPServer; in your browser go to http://localhost:8000/nameofhtmlfile.html and everything will work as you expect.

|

Collectives™ on Stack Overflow

Why Chrome cannot access to external stylesheet using insertRule with Javascript?

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related