这是问题的一个简单示例：
<html>
<head>
<link rel='stylesheet' href='myStyle.css'>
<script>
window.onload=function(){
try{
alert(document.styleSheets[0]); // works
alert(document.styleSheets[0].cssRules); // doesn't even print undefined
}catch(e){alert(e);} // catch and alert the error
}
</script>
</head>
<body>
</body>
</html>
myStyle.cssbody{background-color:green;}
该脚本可以很好地使用<style></style>
解决方案：
- 当文件在线/本地主机时工作。
- 与其他浏览器配合使用。 （即 Internet Explorer、Microsoft Edge、Firefox）
- chrome --允许从文件访问文件
TL;DR：从 Chrome 64 开始，您需要使用本地开发服务器来测试依赖于 CSS 对象模型的功能。
访问从本地文件系统加载的样式表中的 CSS 规则违反了跨域资源共享 (CORS)政策 - 但 Chrome 直到最近才强制执行此政策，其他浏览器似乎还没有强制执行。
Chrome 64.0.3282.0（2018 年 1 月发布，完整变更清单）包括对样式表安全规则的更改。我在任何比完整提交列表更详细的变更日志中找不到此更改。
Commit a4ebe08Chromium 中是这样描述的：
更新 CSSStyleSheet 的行为以匹配安全源的规范
规格在这里：https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
更新：如果以下方法现在抛出 SecurityError
样式表不可访问：
- cssRules() / 规则()
- 插入规则()
- 删除规则()
此提交是对错误的修复安全性：关于 CSS 和链接元素的 CORS 实现不一致。链接的 W3C 规范详细描述了 CSS 对象模型的使用需要同源访问的情况。
这是一个真正的安全约束，您发布的解决方案（在线/本地主机）可能是最典型的解决方法。欲了解更多信息，请查看 MDN如何设置本地测试服务器？- 它讨论了为什么以及如何使用本地开发服务器来避免 CORS 问题。
也就是说，围绕这一变化仍然存在一些悬而未决的问题和争论。
-
这条评论最初的安全错误抱怨说，现在检测样式表无法从 JavaScript 访问的唯一方法是使用
try/catch.
- Chromium bug 于 1 月 23 日出现（即使使用 Access-Control-Allow-Origin，document.styleSheets.cssRules 也为 null：*）表明新的安全规则可能存在实施问题，破坏了某些解决方法。
- 正在实施的规范看起来相当稳定，但它仍然处于“工作草案”状态，因此谁知道它将在哪里落地以及其他浏览器将实施什么。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
