无法访问外部 CSSStyleSheet 中的规则

Posted 2023-03-04

【中文标题】无法访问外部 CSSStyleSheet 中的规则

【英文标题】：cannot access rules in external CSSStyleSheet

【发布时间】：2018-08-11 19:29:54

【问题描述】：

我无法弄清楚为什么 .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 是否只是不支持它，或者我的代码是否有问题，无论哪种方式，我都非常感谢任何帮助。

【问题讨论】：

我对@9​​87654332@ 不太熟悉，但富有成效的手册说它有一个cssRules 成员，而不是rules。这可能有关系吗？

我尝试同时使用.cssRules 和.rules，但它们都给了我同样的错误

在我的 Firefox 58 中，它适用于 cssRules； Chromium 显示“无法从 'CSSStyleSheet' 读取 'cssRules' 属性”。我不知道为什么。你用的是什么浏览器？

我认为 Chrome 64 中可能存在错误。我在不同的 Github 项目上看到了几个似乎引用相同问题的问题。祝你好运。

您是否在从服务器（HTTP 或 HTTPS）提供的页面中执行此操作？还是在文件系统提供的页面中（file:// URL）？后者可能已损坏，通常不推荐使用这种浏览方式，因为它在许多方面都已损坏（出于安全目的）。

【参考方案1】：

从 Chrome 64 开始，对样式表实施了新的 CORS 规则。您需要使用本地开发服务器对依赖于 CSS 对象模型的功能进行本地测试。详情请见Cannot access cssRules from local css file in Chrome。