Javascript 无法访问外部CSSStyleSheet中的规则

我很难理解为什么

.cssRules

和

.rules

在我过于简单的颜色生成器项目中不起作用

我有一个

元素来链接我的外部CSS文件：

以及一个

元素，用于在

元素之前链接我的外部JS文件：

然后，我的CSS文件中有以下内容：

*{
框大小：边框框；
保证金：0；
填充：0；
}
#身体{
背景：#e1f4；
}

在JS文件中：

constmysheet=document.styleSheets[0]；
const body=document.getElementById（“body”）；
body.onkeydown=函数（e）{
如果（e.keyCode==32）{
mySheet.rules[0].style.background=“#ffa500”；
}
};

但当我按空格（

e.keyCode==32

）时，什么也没有发生，因此我在Chrome中打开开发人员工具，并收到以下错误消息：

Uncaught-DOMException:未能从“CSSStyleSheet”读取“rules”属性：无法访问HTMLBodyElement.body.onkeydown中的规则

---

我不确定Chrome是否不支持它，或者我的代码是否有故障，因此我非常感谢您的帮助。

从Chrome 64开始，新的CORS规则对样式表强制执行。您需要使用本地开发服务器对依赖于CSS对象模型的功能进行本地测试。有关详细信息，请参阅。

我对

CSSStyleSheet

不太熟悉，但富有成果的手册说它有

cssRules

成员，而不是

规则。这可能有关系吗？我试着同时使用
.cssRules
和
.rules
，但在我的Firefox 58中，它们都给了我相同的错误，它与
cssRules
一起工作；Chrome说“无法从“CSSStyleSheet”读取“cssRules”属性”。我不知道为什么。您使用的浏览器是什么？我认为Chrome 64中可能存在错误。我在不同的Github项目上看到了一些问题，它们似乎引用了同一个问题。祝您好运。您是在服务器（HTTP或HTTPS）提供的页面中这样做的吗？或在文件系统（file://URL）提供的页面中？后者可能会被破坏，通常不建议使用这种浏览方式，因为它在许多方面都会被破坏（出于安全目的）。