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>元素。