CSS object model
CSS インターフェイス は CSS に関連した便利なメソッドを持っています。このインターフェイスにはオブジェクトは実装されていません。静的メソッドのみがあり、実用的なインターフェイスになっています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 28 | 12 | 22 | 9 | 28 | 9 | |
| CSSConditionRule インターフェイスを実装しているオブジェクトは、条件と文のブロックからなる単一の条件付き CSS アットルールを表します。 | 56 | 12 | 20 | 14.1 | 56 | 14.5 |
| conditionText は CSSConditionRule インターフェイスのプロパティで、この CSS ルールのテキストを返したり設定したりします。 | 56 | 12 | 20 | 14.1 | 56 | 14.5 |
| CSSGroupingRule は CSS オブジェクトモデルのインターフェイスで、内部に他のルールを持つあらゆる CSS のアットルールを表します。 | 45 | 12 | 20 | 14.1 | 45 | 14.5 |
| cssRules は CSSGroupingRule インターフェイスのプロパティで、 CSSRuleList 型で CSSRule オブジェクトのコレクションを返します。 | 45 | 12 | 20 | 3 | 45 | 2 |
| deleteRule() は CSSGroupingRule インターフェイスのメソッドで、子 CSS ルールの一覧からある CSS ルールを取り除きます。 | 45 | 12 | 20 | 3 | 45 | 2 |
| insertRule() は CSSGroupingRule インターフェイスのメソッドで、新しい CSS ルールを CSS ルールのリストへ追加します。 | 45 | 12 | 20 | 3 | 45 | 2 |
CSSMarginRule 実験的 | 131 | 131 | | | 131 | |
name 実験的 | 131 | 131 | | | 131 | |
style 実験的 | 131 | 131 | | | 131 | |
| CSSMediaRule は、単一の CSS の @media ルールを表すインターフェイスです。 | 1 | 12 | 1 | 3 | 18 | 1 |
| media は CSSMediaRule インターフェイスの読み取り専用プロパティで、 MediaList でスタイル情報の出力先メディアを表します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| CSSPageDescriptors インターフェースは、@page アットルールの CSS 宣言ブロックを表します。 | | | 129 | 26 | | 26 |
| 対応する@ページのat-ruleのmarginプロパティを表す文字列。 | | | 129 | 26 | | 26 |
| 対応する@ページのat-ruleのmargin-bottomプロパティを表す文字列。 | | | 129 | 26 | | 26 |
| 対応する@ページのat-ruleのmargin-leftプロパティを表す文字列。 | | | 129 | 26 | | 26 |
| 対応する@ページのat-ruleのmargin-rightプロパティを表す文字列。 | | | 129 | 26 | | 26 |
| 対応する@pageアトルールのmargin-topプロパティを表す文字列。 | | | 129 | 26 | | 26 |
| | | 129 | 26 | | 26 | |
| | | 129 | 26 | | 26 | |
| | | 129 | 26 | | 26 | |
| | | 129 | 26 | | 26 | |
page-orientation 実験的 対応する@page at-ruleのpage-orientationプロパティを表す文字列。 | | | 129 | | | |
pageOrientation 実験的 | | | 129 | | | |
| 対応する@pageのat-ruleのsizeプロパティを表す文字列。 | | | 129 | 26 | | 26 |
| CSSPageRule は単一の CSS @page ルールを表します。 | 1 | 12 | 19 | 3 | 18 | 1 |
| selectorText は CSSPageRule インターフェイスのプロパティで、この CSSPageRule に関連付けられたセレクターを取得および設定します。 | 1 | 12 | 110 | 3 | 18 | 1 |
| style は CSSPageRule インターフェイスの読み取り専用プロパティで、 CSSStyleDeclaration オブジェクトを返します。これは CSS 宣言ブロックであるオブジェクトを表し、スタイル情報や様々なスタイル関係のメソッドとプロパティを公開します。 | 1 | 12 | 19 | 3 | 18 | 1 |
style (type CSSPageDescriptors) タイプが `CSSPageDescriptors` に変更された。 | | | 129 | 26 | | 26 |
CSSPseudoElement 実験的 CSSPseudoElement インターフェイスは、イベントの対象としたりWeb Animations API を使用してアニメーションさせたりする擬似要素を表します。このインターフェイスのインスタンスは Element.pseudo() を呼び出すことで取得できます。 | 147 | 147 | 75 | | 147 | |
element 実験的 element は CSSPseudoElement インターフェイスの読み取り専用のプロパティで、擬似要素の元要素、言い換えれば親要素への参照を返します。 | 147 | 147 | 75 | | 147 | |
type 実験的 type は CSSPseudoElement インターフェイスの読み取り専用プロパティで、擬似要素の型を CSS セレクターの形の文字列で表します。 | 147 | 147 | 75 | | 147 | |
| CSSRule インターフェイスは、1 つの CSS ルールを表します。 CSSRule からプロパティを継承しているルールを表す型がいくつかあります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| cssText は CSSRule インターフェイスのプロパティで、 CSSStyleSheet スタイルルールの実際のテキストを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| parentRule は CSSRule インターフェイスのプロパティで、現在のルールを内包するルールがあれば、それを返します。なければ null を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| parentStyleSheet は CSSRule インターフェイスのプロパティで、現在のルールを定義している StyleSheet オブジェクトを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSRuleList は読み取り専用の CSSRule オブジェクトの順序付きコレクションを表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| item() は CSSRuleList インターフェイスのメソッドで、 index で指定された CSSRule オブジェクトを返します。指定された index が存在しなければ null を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| length は CSSRuleList インターフェイスのプロパティで、リスト内の CSSRule オブジェクトの数を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleDeclaration インターフェイスは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。 | 1 | 12 | 1 | 1 | 18 | 1 |
@@iterator [シンボル.イテレータ] | 51 | 18 | 36 | 11 | 51 | 11 |
| cssText は CSSStyleDeclaration インターフェイスのプロパティで、その要素のインラインスタイル宣言のみのテキストを返したり設定したりします。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleDeclaration.getPropertyPriority() メソッドインターフェイスは、その CSS プロパティに明示的に設定されたすべての優先度を文字列で返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleDeclaration.getPropertyValue() メソッドインターフェイスは、指定された CSS プロパティの値を含む文字列を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleDeclaration.item() メソッドインターフェイスは、CSSStyleDeclaration の指定した位置の CSS プロパティ名を返します。 | 1 | 12 | 1 | 6 | 18 | 6 |
| 読み取り専用のプロパティで、この CSS 宣言ブロックにあるスタイル宣言の数を整数で表します。 | 1 | 12 | 1 | 6 | 18 | 6 |
| CSSStyleDeclaration.parentRule は読み取り専用のプロパティで、このスタイルブロックの親である CSSRule を返します。例えば、 CSS セレクターのスタイルを表す CSSStyleRule です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleDeclaration.removeProperty() メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleDeclaration.setProperty() メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。 | 1 | 12 | 1 | 6 | 18 | 6 |
| CSSStyleRule は、単一の CSS スタイルルールを表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| selectorText は CSSStyleRule インターフェイスのプロパティで、この CSSStyleRule に関連付けられたセレクターを取得および設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| style は読み取り専用プロパティで、この の宣言ブロックのための インターフェイスです。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleSheet インターフェイスは、1 枚の CSS スタイルシートを表し、そのスタイルシートに含まれるルールのリストを調べたり変更したりすることができます。これは、その親の StyleSheet からプロパティとメソッドを継承しています。 | 1 | 12 | 1 | 1 | 18 | 1 |
| cssRules は CSSStyleSheet の読み取り専用プロパティで、スタイルシートを構成するすべての CSS ルールについて、リアルタイムで最新のリストを提供する生きた CSSRuleList を返します。リストの各項目は、単一のルールを定義する CSSRule です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleSheet.deleteRule() メソッドは、スタイルルールを現在のスタイルシートオブジェクトから削除します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSSStyleSheet.insertRule() メソッドは、新しい CSS ルールを現在のスタイルシートに挿入します。 | 1 | 12 | 1 | 1 | 18 | 1 |
insertRule (index parameter optional) index` パラメータはオプションです。 | 1 | 12 | 55 | 1 | 18 | 1 |
| CSSStyleSheet の ownerRule は読み取り専用プロパティで、CSSImportRule を返します。これは、スタイルシートを文書にインポートする @import アットルールに対応します。スタイルシートが @import を使用して文書にインポートされていない場合、返される値は null です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| styleSheets は Document インターフェイスの読み取り専用プロパティで、 CSSStyleSheet オブジェクトの StyleSheetList を返します。これは、この文書に明示的にリンク埋め込まれたスタイルシートを表します。 | 1 | 12 | 1 | 4 | 18 | 3.2 |
| style は HTMLElement の読み取り専用プロパティで、要素のインラインスタイルを、動的な CSSStyleDeclaration オブジェクトの形で返します。このオブジェクトはその要素のすべてのスタイルプロパティの一覧を含み、要素のインラインの style 属性で定義されている属性にのみ値が割り当てられています。 | 1 | 12 | 1 | 3 | 18 | 1 |
| sheet は HTMLLinkElement インターフェイスの読み取り専用プロパティで、この要素に関連付けられたスタイルシートが入ります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| sheet は HTMLStyleElement インターフェイスの読み取り専用プロパティで、この要素に関連付けられたスタイルシートを保持します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| MediaList インターフェイスはスタイルシートのメディアクエリーを表します。例えば、 link 要素の media 属性で設定されるものです。 | 1 | 12 | 1 | 1 | 18 | 1 |
| MediaListインタフェースのappendMedium()メソッドは、リストにメディア・クエリを追加する。メディア・クエリが既にコレクション内にある場合、このメソッドは何も行いません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| MediaListインタフェースのdeleteMedium()メソッドは、指定されたメディアクエリをこのMediaListから削除する。 | 1 | 12 | 1 | 1 | 18 | 1 |
| MediaList インターフェイスの item() メソッドは、指定したインデックスのメディアクエリを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| MediaListインターフェイスの読み取り専用のlengthプロパティは、リスト内のメディアクエリの数を返す。 | 1 | 12 | 1 | 1 | 18 | 1 |
| mediaText は MediaList インターフェイスのstringifierプロパティで、この MediaList をテキストとして表す文字列を返します。新しい MediaList を設定することもできます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| MediaListインタフェースのtoString()文字列化メソッドは、オブジェクトの値を表す文字列を返します。値は、MediaList.mediaTextプロパティと同じ形式のメディア値のカンマ区切りリストです。 | 1 | 12 | 1 | 1 | 18 | 1 |
| sheet は ProcessingInstruction インターフェイスの読み取り専用プロパティで、 ProcessingInstruction に関連付けられたスタイルシートを保持します。 | 1 | 79 | 1 | 1 | 18 | 1 |
| styleSheets は ShadowRoot インターフェイスの読み取り専用プロパティで、シャドウツリーに明示的にリンクされるか埋め込まれたスタイルシートを表す CSSStyleSheet オブジェクトの StyleSheetList を返します。 | 53 | 79 | 63 | 12.1 | 53 | 12.2 |
| StyleSheet インターフェイスを実装するオブジェクトは、単一のスタイルシートを表します。 CSS スタイルシートは、より特殊化された CSSStyleSheet インターフェイスを実装します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| disabled は StyleSheet インターフェイスのプロパティで、 このプロパティは、スタイルシートが文書内に適用されないようにするかどうかを決定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| href は StyleSheet インターフェイスのプロパティで、スタイルシートの場所を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| media は StyleSheet インターフェイスのプロパティで、スタイル情報の対象となる出力先メディアを指定します。これは読み取り専用の配列風の MediaList オブジェクトで、 deleteMedium() で削除し、 appendMedium() で追加することが可能です。 | 1 | 12 | 1 | 1 | 18 | 1 |
| ownerNode は StyleSheet インターフェイスのプロパティで、このスタイルシートと文書内の関連付けを行うノードを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| parentStyleSheet は StyleSheet インターフェイスのプロパティで、指定されたスタイルシートをインクルードしている場合、そのスタイルシートを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| title は StyleSheet インターフェイスのプロパティで、現在のスタイルシートのアドバイザリータイトルを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| type は StyleSheet インターフェイスのプロパティで、このスタイルシートのスタイルシート言語を指定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| StyleSheetList インターフェイスは StyleSheet のリストを表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| StyleSheetList インターフェイスの item() メソッドは、単一の CSSStyleSheet オブジェクトを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| StyleSheetList インターフェースの length 読み取り専用プロパティは、コレクション内の CSSStyleSheet オブジェクトの数を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (14.1)
- CSSGroupingRule` インターフェース自体は存在しないが、多くのメソッドは `CSSMediaRule` や `CSSPageRule` インターフェースなどの様々なインターフェースで利用できる。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (14.5)
- CSSGroupingRule` インターフェース自体は存在しないが、多くのメソッドは `CSSMediaRule` や `CSSPageRule` インターフェースなどの様々なインターフェースで利用できる。
- Firefox 20 以前では、`conditionText` を設定できませんでした。
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
基本構文
// Manipulating inline styles
el.style.setProperty('color', 'blue');
// Manipulating stylesheet rules
const sheet = document.styleSheets[0];
sheet.insertRule('.highlight { background: yellow; }', 0); ライブデモ
Insert a rule
Create a stylesheet at runtime and append a new rule through the CSS object model.
実務での使いどころ
-
CSS object model の活用
CSS インターフェイス は CSS に関連した便利なメソッドを持っています。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。