我无法弄清楚为什么.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是否支持它,或者如果我的代码出现故障,无论如何我都非常感谢您的帮助。
答案 0 :(得分:12)
从Chrome 64开始,对样式表强制执行新的CORS规则。您需要使用本地开发服务器对依赖于CSS对象模型的功能进行本地测试。有关详细信息,请参阅Cannot access cssRules from local css file in Chrome。