CSSStyleSheet - スタイルシート
CSSStyleSheetは、CSSスタイルシートを管理するための機能を備えたインターフェイスです。
概要
- 名前
- CSSStyleSheet
- 継承
- StyleSheet
- CSSStyleSheet
- IDL
[Exposed=Window] interface CSSStyleSheet : StyleSheet { readonly attribute CSSRule? ownerRule; [SameObject] readonly attribute CSSRuleList cssRules; unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0); void deleteRule(unsigned long index); }; typedef USVString CSSOMString;
- 仕様書
- https://drafts.csswg.org/cssom/#cssstylesheet
チュートリアル
CSSStyleSheetのインターフェイスは、StyleSheetListの個々のインデックスに含まれています。
var styleSheetList = document.styleSheets ; // CSSStyleSheet
styleSheetList[0] ; // CSSStyleSheet
スタイルシートとは、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 ; // CSSStyleSheet
styleSheetList[0] ; // <link rel="stylesheet" href="./style.css"> (CSSStyleSheet)
styleSheetList[1] ; // <style id="hoge">...</style> (CSSStyleSheet)
styleSheetList[2] ; // <style id="fuga">...</style> (CSSStyleSheet)
コンストラクタ
コンストラクタはありません。
プロパティ
cssRules
スタイルシートが含む全てのCSSルールをCSSRuleListで返します。
ownerRule
自身のオーナーであるCSSルールを返します。
メソッド
deleteRule()
スタイルシートのCSSルールを1つ削除します。
insertRule()
スタイルシートに1つのCSSルールを追加します。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
CSSStyleSheet | ● | ● | ● | ● | ● | ● | ● | ● |
cssRules | ● | ● | ● | ● | ● | ● | ● | ● |
deleteRule() | ● | ● | ● | ● | ● | ● | ● | ● |
insertRule() | ● | ● | ● | ● | ● | ● | ● | ● |
ownerRule | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- CSSStyleSheet.insertRule()
- insertRule()は、CSSStyleSheetのメソッドです。スタイルシートに1つのCSSルールを追加します。
- CSSStyleSheet.cssRules
- cssRulesは、CSSStyleSheetのプロパティです。スタイルシートが含む全てのCSSルールをCSSRuleListで返します。
- 先頭、末尾の文字を取得する
- 先頭、末尾の文字を取得します。
- IDLリファレンス
- WHATWGやW3Cで定義されているDOMなどのWeb APIの仕様を、サンプルコードやデモ付きでまとめています。