javascript - 无法访问外部 CSSStyleSheet 中的规则

Question

我无法弄清楚为什么 .cssRules和 .rules在我简单的颜色生成器元素中不起作用。

我有一个 <link>元素链接我的外部 CSS 文件:

<link href="ColorGenerator.css" type="text/css" rel="stylesheet">

还有一个 <script>在 </html> 之前链接我的外部 JS 文件的元素元素:

<script src="ColorGenerator.js" type="text/javascript"></script>

然后我在我的 CSS 文件中有这个:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#body {
  background: #E1E1F4;
}

在 JS 文件中:

const mySheet = document.styleSheets[0];
const body = document.getElementById("body");

body.onkeydown = function(e) {
  if (e.keyCode == 32) {
    mySheet.rules[0].style.background = "#ffa500";
  }
};

但是当我按下空格键 ( e.keyCode == 32 ) 时没有任何反应，所以我在 Chrome 中打开开发人员工具并收到此错误消息:

Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at HTMLBodyElement.body.onkeydown

我不确定 Chrome 是否不支持它，或者我的代码是否有问题，无论如何，我真的很感谢任何帮助。

Answer 1

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