document.styleSheets不能检测到所有样式表

Question

我试图在任何已加载的页面中检测（然后更改）样式表。

我尝试以下代码：

 // from https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList var allCSS = [].slice.call(document.styleSheets) .reduce(function (prev, styleSheet) { if (styleSheet.cssRules) { return prev + [].slice.call(styleSheet.cssRules) .reduce(function (prev, cssRule) { return prev + cssRule.cssText; }, ''); } else { return prev; } }, ''); console.log(allCSS); 

例如，当我在此页面上运行此代码时，控制台中会显示一些样式表。

但是，这绝对不是所有样式，实际上只是其中的一小部分。

例如，在调试器中，我看到页面从cdn.sstatic.net加载了all.css ，其中包含许多样式，但均未显示。

我究竟做错了什么 ？ 以及如何获取所有样式表？

谢谢！

Answer 1

规则

在某些浏览器中，如果样式表是从其他域加载的，
调用cssRules导致SecurityError。

• 用户代理（默认）样式表在document.styleSheets中不可见

CSSStyleSheet接口（规格）

cssRules属性必须遵循以下步骤：

• 如果未设置origin-clean标志，则引发SecurityError异常。
• 返回一个表示实时CSS规则的只读CSSRuleList对象。

Answer 2

如果需要获取和更改在document加载的.css文件，则可以请求在DevTools查看的文件，从document删除所有现有样式表，对响应文本进行调整，将调整后的文本作为.css附加到document或在<style>元素。