未捕获的DOMException：无法读取'cssRules'属性

Question

我不知道为什么我的脚本不能在Firefox上使用，而在谷歌浏览器上却不能使用

JS：

var _timelineWidth = (Number.parseInt(document.styleSheets[0].cssRules[16].style.width) / 100) * document.body.clientWidth;

CSS：

#timeline {
  position: relative;
  top: 15px;
  left: 12.5%;
  height: 5px;
  background: #aaa;
  border-radius: 2.5px;
  cursor: pointer;
}

这是chrome的错误代码

未捕获的DOMException：无法从“ CSSStyleSheet”读取“ cssRules”属性：无法访问规则

Answer 1

您可以添加crossorigin="anonymous"以防止错误。

<link rel="stylesheet" href="https://..." crossorigin="anonymous">

更多信息请点击这里：

这将创建一个潜在的 cors 请求，但服务器必须使用Access-Control-Allow-Origin: *或进行响应Access-Control-Allow-Origin: <authorized-domain>。

您可以在此处查看如何向您的服务器添加 CORS 支持。

有关 CORS 的更多信息，您可以阅读此和此。

Answer 2

在最新的Chrome中，CORS安全规则也适用于样式表（类似于Iframe规则）。

您可以加载和呈现它们，但是不能通过javascript访问内容（如果从Cross-Domain加载）。

如果您的CSS样式表来自与HTML相同的域，或者包含在相同的HTML文件中，则可以访问，document.styleSheets[elem].cssRules 否则会引发错误

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

跨域样式表

相同的域样式表