CSS 型付きオブジェクトモデル API
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
CSS 型付きオブジェクトモデル API (CSS Typed Object Model API) は、 CSS の値を文字列ではなく、型付き JavaScript オブジェクトとして提供することにより、CSS のプロパティ操作を簡略化するものです。これは CSS の操作を単純化するだけでなく、 HTMLElement.style と比較して、パフォーマンスへの悪影響も軽減できます。
一般的に、 CSS の値は JavaScript で文字列として読み書きすることができますが、これは遅くて煩わしい場合があります。 CSS 型付きオブジェクトモデル API は、文字列の解析と連結に比べてより簡単に、より確実に操作と理解ができる特殊な JS オブジェクトで値を表現することにより、基礎となる値と対話するためのインターフェイスを提供します。これは開発者にとって扱いがより簡単です（例えば、数値が実際の JS の数値に反映され、そこに定義されている単位を考慮した数値演算ができます）。また、 CSS の文字列の構築と解析の両方を行うことなく、値を直接操作し、安価に元の値に戻すことができるため、一般に高速に処理することができます。
CSS 型付きオブジェクトモデルは、 CSS のプロパティに割り当てられた値を効率的に操作できるとともに、より理解しやすく書きやすい保守性の高いコードを実現します。
インターフェイス
>CSSStyleValue
CSSStyleValue は CSS 型付きオブジェクトモデル API のインターフェイスで、型付きオブジェクトモデル API を通してアクセスできるすべての CSS 値の基底クラスとなるものです。このクラスのインスタンスは、文字列が期待される場所であればどこでも使用することができます。
CSSStyleValue.parse()-
CSS 文字列から
CSSNumericValueを構築することができるメソッドです。これは、特定の CSS プロパティを指定された値に設定し、最初の値をCSSStyleValueオブジェクトとして返します。 CSSStyleValue.parseAll()-
特定の CSS プロパティを指定された値に設定するメソッドで、
CSSStyleValueオブジェクトの配列を返すもので、それぞれが指定された値の一つを含んでいます。
StylePropertyMap
StylePropertyMap は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSSStyleDeclaration の代替となる CSS 宣言ブロックの表現を提供します。
StylePropertyMap.set()-
指定されたプロパティを持つ CSS 宣言を指定された値に変更するメソッドです。
StylePropertyMap.append()-
指定されたプロパティと値による新しい CSS 宣言を、この
StylePropertyMapに追加するメソッドです。 StylePropertyMap.delete()-
指定されたプロパティを持つ CSS 宣言を、この
StylePropertyMapから削除するメソッドです。 StylePropertyMap.clear()-
StylePropertyMapからすべての宣言を削除するメソッドです。
CSSUnparsedValue
CSSUnparsedValue は CSS 型付きオブジェクトモデル API のインターフェイスで、カスタムプロパティを参照するプロパティ値を表します。文字列の断片と変数の参照のリストから成ります。
CSSUnparsedValue()コンストラクター-
カスタムプロパティを参照するプロパティ値を表す新しい
CSSUnparsedValueオブジェクトを生成します。 CSSUnparsedValue.entries()-
このオブジェクト自身の列挙可能なプロパティの
[key, value]ペアの配列をfor...inループで提供されるのと同じ順序で返すメソッドです（for-in ループはプロトタイプチェーン内のプロパティも列挙する点が異なります）。 CSSUnparsedValue.forEach()-
CSSUnparsedValueの各要素に対して、提供された関数を一回ずつ実行するメソッドです。 CSSUnparsedValue.keys()-
配列のそれぞれのインデックスのキーを含む、新しい配列イテレーターオブジェクトを返すメソッドです。
CSSKeywordValue シリアライズ
CSSKeywordValue は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSS キーワードやその他の識別子を表現するためのオブジェクトを作成します。
CSSKeywordValue()コンストラクター-
CSS キーワードなどの識別子を表す新しい
CSSKeywordValue()オブジェクトを作成するコンストラクターです。 CSSKeywordValue.value()-
CSSKeywordValue インターフェイスのプロパティで、CSSKeywordValue の値を返すか設定します。
CSSStyleValue インターフェイス
CSSStyleValue は、すべての CSS 値が表現される基本クラスです。サブクラスは以下の通りです。
CSSImageValueオブジェクト-
画像を取るプロパティ、例えば
background-image,list-style-image,border-image-sourceの値を表すインターフェイスです。 CSSKeywordValue-
CSS のキーワードやその他の識別子を表現するオブジェクトを生成する インターフェイスです。文字列が期待される場所で使用された場合、
CSSKeyword.valueの値を返します。 CSSMathValue-
単一の値や単位よりも複雑な数値を表すサブクラスのツリーで、次のようなものがあります。
CSSMathInvert- CSS のcalc()値をcalc(1 / <value>)のように使用したものを表現します。CSSMathMax- CSS のmax()関数を表します。CSSMathMin- CSS のmin()関数を表します。CSSMathNegate- 渡された値を否定します。CSSMathProduct-CSSNumericValueに対してadd(),sub(),toSum()を実行した結果を表します。CSSMathSum-CSSNumericValueに対してadd(),sub(),toSum()を実行した結果を表します。
CSSNumericValue-
すべての数値が実行可能な操作を表すインターフェイスです。
CSSNumericValue.add- 与えられた数字をCSSNumericValueに加算します。CSSNumericValue.sub- 与えられた数値をCSSNumericValueから減算します。CSSNumericValue.mul- 与えられた数値をCSSNumericValueに乗算します。CSSNumericValue.div-CSSNumericValueを指定された値で割り、0の場合にエラーが発生します。CSSNumericValue.min- 渡された値の最小値を返します。CSSNumericValue.max- 渡された値の最大値を返します。CSSNumericValue.equals- すべての値がまったく同じ型と値で、同じ順序である場合には true を返します。そうでなければ、 false を返します。CSSNumericValue.to-valueを指定された単位の別の値に変換する。CSSNumericValue.toSumCSSNumericValue.typeCSSNumericValue.parse- CSS の文字列から解釈された数値を返します。
CSSPositionValue-
object-position など、位置を取るプロパティの値を表します。
CSSTransformValue-
transformのリスト値を表すインターフェイスです。これらは 1 つ以上のCSSTransformComponentを含んでおり、個々のtransform関数値を表します。 CSSUnitValue-
単一の単位、または名前付き数値とパーセントで表現できる数値を表すインターフェイスです。
CSSUnparsedValue-
カスタムプロパティを参照するプロパティ値を表します。文字列の断片と変数参照のリストで構成されます。
仕様書
| 仕様書 |
|---|
| CSS Typed OM Level 1> # stylevalue-objects> |
| CSS Typed OM Level 1> # the-stylepropertymap> |
| CSS Typed OM Level 1> # cssunparsedvalue> |
| CSS Typed OM Level 1> # keywordvalue-objects> |