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

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

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

但我收到了这个错误消息（令人惊讶的是，只有在Chrome64、FireFox、Safari mobile和Chrome mobile上运行良好）：

未捕获的DomeException:未能在“CSSStyleSheet”上执行“insertRule”：无法访问insertRule的样式表

---

为什么？

更改插入的索引。在CSS文件中，所有@Rules必须位于文件的顶部。因此，如果CSS文件顶部有4个@rules，请将索引更改为4，这样：

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

这应该行得通

以下是规范参考（见注释）：

---

@TemaniAfif-不再适用（从4年前开始），您是否检查了现有样式表以确保它们没有错误@RandyCasburn我只是简单地联系了一个类似的答案，这可能会有所帮助；）我从来没有说过它适用于。。。如果是这样的话，我会将其作为副本关闭：）样式表是否来自同一来源？如果没有，这就是人们对Chrome的期望。@TemaniAfif-OK-但这是一个完全不同的错误消息：-/我尝试了这个解决方案，但随着规则顺序的改变，事情变得失控。但是我试图不在样式表中添加规则，而只是阅读它。我使用了以下代码：

example.innerHTML=document.styleSheets[0].cssRules[0].cssText

，并得到以下错误：未捕获的DomeException:未能从“csssStylesheet”读取“cssRules”属性：无法访问rulesBummer-我们从前面的插件中知道，它可以正确地处理简单模型。似乎我们已经将此隔离到了您的样式表中。我没有主意了。我试过用一个非常简单的版本。看起来，问题出在我的Chrome上

asd此文档。样式表[0]。insertRule（“h2{color:white}”，0）

CSS:

h2{background color:aqua}

相同错误：未捕获DomeException:未能对“CSSSStyleSheet”执行“insertRule”：无法访问insertRule的样式表，但我尝试了，它与头部的内部样式表一起工作。@GergőHorváth我知道这听起来可能有点奇怪，但请在

元素中添加一个带有字符串的title属性，然后再次尝试您的简单用例。这就是CORS的问题。任何时候，如果您希望从使用“文件”协议（file://）从文件系统加载的网页加载URL，则该文档的来源为“null”。因此，即使是从（同一台机器）加载资源也是一个不同的来源。如果您有python：在HTML文件所在的文件夹中打开shell或命令提示符并执行：

python-msimplehttpserver

；在浏览器中，转到

http://localhost:8000/nameofhtmlfile.html

，一切都会按照您的预期进行。