SYNCERのロゴ
アイキャッチ画像

StyleSheetList - スタイルシートの集合

StyleSheetListは、スタイルシートの集合を管理するための機能を備えたインターフェイスです。

概要

名前
StyleSheetList
IDL
[Exposed=Window,
 LegacyArrayClass]
interface StyleSheetList {
  getter StyleSheet? item(unsigned long index);
  readonly attribute unsigned long length;
};
仕様書
https://drafts.csswg.org/cssom/#stylesheetlist

チュートリアル

StyleSheetListはDocument.styleSheetsが返します。

document.styleSheets ;	// StyleSheetList

スタイルシートの集合における単位は、style要素やlink要素です。例えば、下記は3つのスタイルシートです。個々のスタイルシートには、インデックス番号でアクセスできます。個々のスタイルシートはCSSStyleSheetで表現されています。

<link rel="stylesheet" href="./style.css">

<style id="hoge">
a { color: red ; }
area { color: blue ; }
</style>

<style id="fuga">
b { color: red ; }
blockquote { color: blue ; }
</style>
var styleSheetList = document.styleSheets ;	// StyleSheetList

styleSheetList[0] ;	// <link rel="stylesheet" href="./style.css"> (CSSStyleSheet)
styleSheetList[1] ;	// <style id="hoge">...</style> (CSSStyleSheet)
styleSheetList[2] ;	// <style id="fuga">...</style> (CSSStyleSheet)

プロパティ

length

スタイルシートの数を返します。

メソッド

item()

インデックス番号を指定してスタイルシートを取得します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
StyleSheetList
item() 8+
length
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。