StyleSheetList

StyleSheetList インターフェイスは StyleSheet のリストを表します。

これは配列風のオブジェクトですが、 Array のメソッドを適用しての反復処理はできません。しかし標準の for ループと添字による反復処理、もしくは Array への変換ができます。

for ループを使用して document の styleSheet オブジェクトを取得

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)
CSSStyleSheetList の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
StyleSheetListChrome 完全対応 1Edge 完全対応 ≤18Firefox 完全対応 31IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 31Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
itemChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 31IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 31Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lengthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 31IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 31Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明