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()
インデックス番号を指定してスタイルシートを取得します。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
StyleSheetList | ● | ● | ● | ● | ● | ● | ● | ● |
item() | ● | ● | ● | ● | ● | ● | ● | ● |
length | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- CSSStyleSheet.cssRules
- cssRulesは、CSSStyleSheetのプロパティです。スタイルシートが含む全てのCSSルールをCSSRuleListで返します。
- Document.styleSheets
- styleSheetsは、Documentのプロパティです。ドキュメントの全てのスタイルシートをStyleSheetListで返します。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- StyleSheetList.length
- lengthは、StyleSheetListのプロパティです。スタイルシートの数を返します。