我很难弄清楚为什么.cssRules
和.rules
在我简单的颜色生成器项目中不起作用。
我有一个<link>
元素来链接我的外部CSS文件:
<link href="ColorGenerator.css" type="text/css" rel="stylesheet">
在</html>
元素之前添加一个<script>
元素来链接我的外部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不支持它,还是我的代码出错了,无论如何,我真的很感激任何帮助。
2条答案
按热度按时间vohkndzv1#
从Chrome 64开始,新的CORS规则对样式表强制执行。您需要使用本地开发服务器对依赖于CSS对象模型的功能进行本地测试。有关详细信息,请参阅无法在Chrome中从本地css文件访问cssRules。
vqlkdk9b2#
我也遇到了同样的问题。在我的情况下,可以使用
fetch(the.css)
来修复它。