StyleSheetList
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
StyleSheetList インターフェイスは StyleSheet のリストを表します。
これは配列風のオブジェクトですが、 Array のメソッドを適用しての反復処理はできません。しかし標準の for ループと添字による反復処理、もしくは Array への変換ができます。
例
for ループを使用して document の styleSheet オブジェクトを取得
js
for (let i = 0; i < document.styleSheets.length; i++) {
let styleSheet = document.styleSheets[i];
}
Array のメソッドを適用してすべての CSS ルールを取得
const allCSS = [...document.styleSheets]
.map(styleSheet => {
try {
return [...styleSheet.cssRules]
.map(rule => rule.cssText)
.join('');
} catch (e) {
console.log('Access to stylesheet %s is denied. Ignoring...', styleSheet.href);
}
})
.filter(Boolean)
.join('\n');
仕様書
| 仕様書 |
|---|
| CSS Object Model (CSSOM) # the-stylesheetlist-interface |