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

Question

我有一个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

为什么？

Answer 1

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

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

这应该工作。

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

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