未捕获的 DOMException：无法在“CSSStyleSheet”上执行“addRule”：无法访问 StyleSheet 以插入规则答案

【问题标题】：Uncaught DOMException: Failed to execute 'addRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule未捕获的 DOMException：无法在“CSSStyleSheet”上执行“addRule”：无法访问 StyleSheet 以插入规则
【发布时间】：2021-01-27 02:24:47
【问题描述】：

我在处理项目时遇到以下错误：“未捕获的 DOMException：无法在 'CSSStyleSheet' 上执行 'addRule'：无法访问 StyleSheet 以插入规则”

有人可以帮我修复我的代码吗，因为我不确定为什么会出现这个错误。

我的 HTML 文档的头部：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plunder Data Research and Analysis</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>

给出错误的 JavaScript 代码行：

styleSheet.addRule(".new-plunder-form-username:focus {border: 1.5px solid #75b4d9; box-shadow: 0 0 5px #75b4d9;}");

styleSheet 常量：

const styleSheet = document.styleSheets[0];

我在 Stack Overflow 上发现了 this 类似的问题，但正如您所见，我的样式表已经与我尝试访问的样式表一起订购，就像它说的那样。

【问题讨论】：

通过查看其属性确保styleSheet 指向正确的样式表。您可能会发现它指向来自 googleapis.com 的那个。
@HereticMonkey 你的意思是document.styleSheets 可能不是CSS在标记中声明的顺序吗？
@HereticMonkey 我刚刚将 styleSheet 记录到控制台并检查了它的属性，它是正确的样式表。
我的意思是有几个原因document.styleSheets[0] 不会引用您认为应该引用的内容。最好只是调试。此外，如果 HTML 与此处显示的内容不完全相同，请告知我们。您显示的错误通常仅在样式表从不同来源加载时引发。
这正是我的 HTML 的整个头部的样子。如果你想要更多的 HTML，我可以添加它。

标签： javascript html css

【解决方案1】：

确保您的服务器上存在styles.css。如果没有，那可能会导致它无法访问。

在最坏的情况下，您可以创建并插入另一个样式表。

const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
styleSheet.textContent = ".new-plunder-form-username:focus {border: 1.5px solid #75b4d9; box-shadow: 0 0 5px #75b4d9;}";

【讨论】：

styles.css 在我的项目文件夹中，我没有运行服务器，所以它应该可以工作。谢谢你的主意！如果我没有得到另一个有效的答案，我可能会这样做。