无法访问外部CSSStyleSheet中的规则

Question

我无法弄清楚为什么.cssRules而.rules不会在我的简单的颜色生成项目.

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

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

以及在<script>元素之前链接我的外部JS文件的</html>元素:

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

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

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

#body {
  background: #E1E1F4;
}

这个在JS文件上:

var mySheet = document.styleSheets[0];
var 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对象模型的功能进行本地测试.有关详细信息,请参阅无法从Chrome中的本地css文件访问cssRules.