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

本文介绍了未捕获的DOMException:无法读取'cssRules'属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I wonder why does my script work on firefox but not on google chrome

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中的错误代码

here's the error code from chrome

推荐答案

在最新的Chrome浏览器中， CORS 安全规则也适用于样式表(类似于Iframe规则).

In latest Chrome, CORS security rules are applicable for style-sheets also (Similar to Iframe rules).

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

You can load and render them but, cannot access the content through javascript (If loaded from Cross-Domain ).

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

If your CSS Stylesheet is from Same domain as of HTML /or included in same HTML file, you will be able to access document.styleSheets[elem].cssRules otherwise it will throw error

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

这篇关于未捕获的DOMException:无法读取'cssRules'属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！