document.styleSheets未检测到所有样式表

Question

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

我尝试下面的代码：

＆＃13;

＆＃13;

// 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);

＆＃13;

＆＃13;

＆＃13;

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

然而，绝对不是所有样式，它实际上只是它的一小部分。

例如，在调试器中，我看到该页面从“cdn.sstatic.net”中加载all.css＆＃39;有许多样式，没有一个显示。

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

THX！

Answer 1

CssRules

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

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

The CSSStyleSheet Interface (specs)

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

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

Answer 2

如果要求获取并更改.css加载的document个文件，您可以请求DevTools处查看的文件，从document删除所有现有的样式表，调整回复文本，将调整后的文本追加到.css至document或<style>元素。