为什么 Chrome 无法使用带有 Javascript 的 insertRule 访问外部样式表？答案

【问题标题】：Why Chrome cannot access to external stylesheet using insertRule with Javascript?为什么 Chrome 无法使用带有 Javascript 的 insertRule 访问外部样式表？
【发布时间】：2018-03-04 22:28:51
【问题描述】：

我有一个 HTML 文件，并在头部链接，一个外部样式表，它们都在同一个文件夹中。只有一个样式表。在正文的底部，我有一个脚本：

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

但我收到此错误消息（令人惊讶的是，仅在 Chrome 64、FireFox、Safari 手机和 Chrome 手机上运行良好）：

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

为什么？

【问题讨论】：

@TemaniAfif - 不再适用（从 4 年前开始）
您是否检查过现有样式表以确保它们没有错误？ jigsaw.w3.org/css-validator
@RandyCasburn 我只是链接了一个可能有帮助的类似答案；）我从来没有说过它适用......如果是这样的话，我会把它作为副本关闭:)
样式表是否来自同一来源？如果不是这样，这就是人们对 Chrome 未来一切的期望。
@TemaniAfif - 好的 - 但这是一个完全不同的错误消息：-/

标签： javascript html css

【解决方案1】：

更改插入的索引。在 CSS 文件中，所有 @ 规则必须在文件的顶部。因此，如果 CSS 文件顶部有 4 个 @ 规则，请将索引更改为 4：

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

应该可以的。

这是规范参考（见注释）：

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

【讨论】：

我尝试了这个解决方案，但是随着规则顺序的改变，事情失去了控制。但我试图不向样式表添加规则，而只是阅读它。我使用了这段代码：example.innerHTML = document.styleSheets[0].cssRules[0].cssText，并得到以下错误：Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
无赖 - 我们从早期的 Plunker 中知道，它可以在一个简单的模型上正常工作。看来我们已将其隔离到您的样式表中。我没有主意了。
我尝试了一个非常简单的版本。看起来，问题出在我的 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> CSS：h2{background-color: aqua} 同样的错误：Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule 但我试过了，它与头部的内部样式表一起工作.
@GergőHorváth 我知道这可能听起来很奇怪，但请在<link> 元素中添加一个带有字符串的标题属性，然后再次尝试您的简单用例。
这是 CORS 问题。每当您想从使用“文件”协议 (file://) 的文件系统加载的网页加载 URL 时，该文档的来源为“null”。因此，即使从localhost（同一台机器）加载资源也是不同的来源。如果你有 python：在 HTML 文件所在的文件夹中打开 shell 或命令提示符并执行：python -m SimpleHTTPServer；在您的浏览器中转到http://localhost:8000/nameofhtmlfile.html，一切都会如您所愿。