CSS typed object model
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSSImageValue は CSS 型付きオブジェクトモデル API のインターフェイスで、 background-image, list-style-image, border-image-source のような画像を取るプロパティの値を表します。
CSSImageValue オブジェクトは <image> のうち URL に関わるもの、例えば url() や image() を表しますが、 linear-gradient() や element() は表しません。
CSSStyleValue CSSImageValue
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 66 | 79 | | 16.4 | 66 | 16.4 | |
| CSSKeywordValue は CSS 型付きオブジェクトモデル API のインターフェイスで、CSS のキーワードやその他の識別子を表すオブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSKeywordValue() コンストラクターは、新しい CSSKeywordValue オブジェクトを生成します。これは CSS のキーワードおよびその他の識別子を表します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| value は CSSKeywordValue インターフェイスのプロパティで、 CSSKeywordValue の値を取得または設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
CSSMathClamp | 100 | 100 | | 16.4 | 100 | 16.4 |
CSSMathClamp CSSMathClamp()`コンストラクタ | 100 | 100 | | 16.4 | 100 | 16.4 |
lower | 100 | 100 | | 16.4 | 100 | 16.4 |
upper | 100 | 100 | | 16.4 | 100 | 16.4 |
value | 100 | 100 | | 16.4 | 100 | 16.4 |
| CSS Typed Object Model API の CSSMathInvert インターフェースは calc(1 / ) として使用される CSS calc を表す。親であるCSSNumericValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMathInvert() コンストラクタは、calc(1 / value) として使用される CSS calc を表す新しい CSSMathInvert オブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMathInvert インターフェースの CSSMathInvert.value 読み取り専用プロパティは、CSSNumericValue オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS型オブジェクトモデルAPIのCSSMathMaxインターフェイスはCSS max関数を表す。親であるCSSNumericValueからプロパティとメソッドを継承しています。 | 66 | 79 | | 16.4 | 66 | 16.4 |
CSSMathMax 実験的 CSSMathMax() コンストラクターは、CSS max 関数を表す新しい CSSMathMax オブジェクトを作成します。 | 66 | 79 | | | 66 | |
| CSSMathMaxインターフェイスのCSSMathMax.values読み取り専用プロパティは、1つ以上のCSSNumericValueオブジェクトを含むCSSNumericArrayオブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSMathMinインターフェイスはCSS min関数を表します。親であるCSSNumericValueからプロパティとメソッドを継承しています。 | 66 | 79 | | 16.4 | 66 | 16.4 |
CSSMathMin 実験的 CSSMathMin() コンストラクターは、CSS min 関数を表す新しい CSSMathMin オブジェクトを作成します。 | 66 | 79 | | | 66 | |
| CSSMathMinインターフェイスのCSSMathMin.values読み取り専用プロパティは、1つ以上のCSSNumericValueオブジェクトを含むCSSNumericArrayオブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSMathNegateインターフェイスは、渡された値を否定します。これは親であるCSSNumericValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMathNegate() コンストラクタは、渡された値を否定する新しい CSSMathNegate オブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMathNegate インターフェースの CSSMathNegate.value 読み取り専用プロパティは、CSSNumericValue オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS型オブジェクトモデルAPIのCSSMathProductインターフェイスは、CSSNumericValueに対してCSSNumericValue.add、CSSNumericValue.sub、またはCSSNumericValue.toSumを呼び出した結果を表します。親である CSSNumericValue からプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
CSSMathProduct 実験的 CSSMathProduct() コンストラクターは、渡された引数を乗算する新しい CSSMathProduct オブジェクトを作成する新しい CSSMathProduct オブジェクトを作成します。 | 66 | 79 | | | 66 | |
| CSSMathProduct インターフェイスの CSSMathProduct.values 読み取り専用プロパティは、1 つ以上の CSSNumericValue オブジェクトを含む CSSNumericArray オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS型オブジェクトモデルAPIのCSSMathSumインターフェイスは、CSSNumericValueに対してCSSNumericValue.add、CSSNumericValue.sub、またはCSSNumericValue.toSumを呼び出した結果を表す。 | 66 | 79 | | 16.4 | 66 | 16.4 |
CSSMathSum 実験的 CSSMathSum() コンストラクターは、新しい CSSMathSum オブジェクトを作成します。このオブジェクトは、CSSNumericValue で CSSNumericValue.add、CSSNumericValue.sub、または CSSNumericValue.toSum を呼び出して取得した結果を表す新しい CSSKeywordValue オブジェクトを作成します。 | 66 | 79 | | | 66 | |
| CSSMathSumインターフェイスのCSSMathSum.values読み取り専用プロパティは、1つ以上のCSSNumericValueオブジェクトを含むCSSNumericArrayオブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model API の CSSMathValue インターフェースは、複雑な数値を表すクラスの基本クラスです。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMathValue インターフェイスの CSSMathValue.operator 読み取り専用プロパティは、現在のサブタイプが表す演算子を示します。例えば、現在の CSSMathValue のサブタイプが CSSMathSum の場合、このプロパティは "sum" という文字列を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSMatrixComponentインターフェイスは、CSSの個々のtransformプロパティのtransform-function/matrixおよびtransform-function/matrix3d値を表します。これは親であるCSSTransformValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMatrixComponent()コンストラクタは、CSSの個々のtransformプロパティのtransform-function/matrixおよびtransform-function/matrix3d値を表す新しいCSSMatrixComponentオブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSMatrixComponent インターフェースの matrix プロパティは、2 次元または 3 次元の行列を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS型オブジェクトモデルAPIのCSSNumericArrayインターフェースは、CSSNumericValueオブジェクトのリストを含む。 | 66 | 79 | | 16.4 | 66 | 16.4 |
@@iterator [シンボル.イテレータ] | 66 | 79 | | 16.4 | 66 | 16.4 |
entries | 66 | 79 | | 16.4 | 66 | 16.4 |
forEach | 66 | 79 | | 16.4 | 66 | 16.4 |
keys | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSNumericArray インターフェースの読み取り専用の length プロパティは、リスト内の CSSNumericValue オブジェクトの数を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
values | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSNumericValue は CSS 型付きオブジェクトモデル APIのインターフェイスで、すべての数値型が実行することができる操作を表します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| add() は CSSNumericValue インターフェイスのメソッドで、指定された値を CSSNumericValue に加算します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| div() は CSSNumericValue インターフェイスのメソッドで、 CSSNumericValue を指定された値で除算します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| equals() は CSSNumericValue インターフェイスのメソッドで、渡された値が厳密に等しいかどうかを示す論理値を返します。 true の値を返すのは、渡されたすべての値が同じ型と値であり、かつ同じ順序である場合です。これにより、構造的な等価性を素早く検査することができます。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| max() は CSSNumericValue インターフェイスのメソッドで、渡された値の中から最も大きい値を返します。渡された値は同じ型でなければなりません。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| min() は CSSNumericValue インターフェイスのメソッドで、渡された値のうちで最も小さい値を返します。渡された値は同じ型でなければなりません。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| mul() は CSSNumericValue インターフェイスのメソッドで、この CSSNumericValue に指定された値を乗算します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| parse() は CSSNumericValue インターフェイスのメソッドで、値の文字列をメンバーが値と単位となっているオブジェクトに変換します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| sub() は CSSNumericValue インターフェイスのメソッドで、この CSSNumericValue から指定された値を減算します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| to() は CSSNumericValue インターフェイスのメソッドで、数値をある単位から他の単位へ変換します。 | 66 | 79 | 149 | 16.4 | 66 | 16.4 |
| toSum() は CSSNumericValue インターフェイスのメソッドで、 CSSMathSum オブジェクトの値を、指定した単位の値に変換するものです。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| type() は CSSNumericValue インターフェイスのメソッドで、 CSSNumericValue の型をf angle, flex, frequency, length, resolution, percent, percentHint, time の何れかで返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSPerspectiveインターフェイスは、CSSの個々のtransformプロパティのtransform-function/perspective値を表します。これは親であるCSSTransformValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSPerspective()コンストラクタは、CSSの個々のtransformプロパティのtransform-function/perspective値を表す新しいCSSPerspectiveオブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSPerspectiveインターフェースのlengthプロパティは、z=0からの距離を設定する。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSRotateインターフェースは、CSSの個々のtransformプロパティの回転値を表す。これは親であるCSSTransformValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSRotate インターフェースの angle プロパティは、回転の角度を取得または設定します。正の角度は時計回りの回転を表し、負の角度は反時計回りの回転を表す。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSRotate()コンストラクタは、CSSの個々のtransformプロパティのtransform-function/rotate値を表す新しいCSSRotateオブジェクトを生成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSRotate インターフェースの x プロパティは、平行移動ベクトルの横軸または x 軸を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSRotate インターフェースの y プロパティは、平行移動ベクトルの縦軸または Y 軸を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSRotate インターフェースの z プロパティで、平行移動ベクトルの z 成分を表します。正の値を指定すると要素はビューアの方に移動し、負の値を指定すると遠ざかります。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSScaleインターフェイスは、CSSの個々のtransformプロパティのtransform-function/scaleとtransform-function/scale3dの値を表します。これは親であるCSSTransformValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSScale()コンストラクタは、CSSの個々のtransformプロパティのtransform-function/scaleおよびtransform-function/scale3d値を表す新しいCSSScaleオブジェクトを生成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSScale インターフェースの x プロパティは、平行移動ベクトルの横軸または x 軸を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSScale インターフェースの y プロパティは、平行移動ベクトルの縦軸または Y 軸を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSScale インターフェースの z プロパティで、平行移動ベクトルの z 成分を表します。正の値は要素を見る人の方へ動かし、負の値は遠ざける。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSSkew は CSSObjectModel#csstypedobject_modelのインターフェイスで、 CSSTransformValue インターフェイスの一部です。これは CSS における個々の transform プロパティの skew() の値を表します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| ay は CSSSkew インターフェイスのプロパティで、 X 軸(または横軸)に沿って要素を歪ませるために使用される角度を取得または設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| ay は CSSSkew インターフェイスのプロパティで、 Y 軸(または縦軸)に沿って要素を歪ませるために使用される角度を取得または設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSSkew() コンストラクターは、新しい CSSSkew オブジェクトを返します。これは、CSS の transform プロパティの skew() の値を表します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS 型付きオブジェクト モデル API の CSSSkewX インターフェイスは、CSS の個々の変換プロパティの変換関数/skewX 値を表します。 親の CSSTransformValue からプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSSkewX インターフェイスの ax プロパティは、x 軸 (または横軸) に沿って要素を歪ませるために使用される角度を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSSkewX() コンストラクターは、CSS の個々の変換プロパティの値を表す新しい CSSSkewX オブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model API の CSSSkewY インターフェイスは、CSS の個々の変換プロパティの変換関数/skewY 値を表します。 親の CSSTransformValue からプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSSkewY インターフェイスの ay プロパティは、y 軸 (または縦軸) に沿って要素を歪ませるために使用される角度を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSSkewY() コンストラクターは、CSS の個々の変換プロパティの変換関数/skewY 値を表す新しい CSSSkewY オブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| styleMap は CSSStyleRule インターフェイスの読み取り専用プロパティで、このルールのプロパティ/値の組にアクセスするための StylePropertyMap オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSStyleValue は CSS 型付きオブジェクトモデル API (Typed OM API) のインターフェイスで、Typed OM API を通してアクセス可能なすべての CSS の値の基本クラスです。このクラスのインスタンスは、文字列が期待される場所であればどこでも使用することができます。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| parse() は CSSStyleValue インターフェイスのメソッドで、特定の CSS プロパティを指定された値に設定し、最初の値を CSSStyleValue オブジェクトとして返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| parseAll() は CSSStyleValue インターフェイスの静的メソッドで、特定の CSS プロパティが出現したものすべてに指定された値に設定し、それぞれが指定された値のいずれかを含む CSSStyleValue オブジェクトの配列を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
toString | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformComponent は CSSObjectModel#csstypedobject_modelのインターフェイスで、 CSSTransformValue インターフェイスの一角です。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| is2D は CSSTransformComponent インターフェイスの読み取り専用プロパティで、この座標変換が 2D と 3D のどちらかであるかを示します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| toMatrix() は CSSTransformComponent インターフェイスのメソッドで、 DOMMatrix オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| toString() は CSSTransformComponent インターフェイスのメソッドで、stringifierであり、 CSS 座標変換関数を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformValue は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSS の transform プロパティで使用される transform-list の値を表します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
@@iterator [シンボル.イテレータ] | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformValue() コンストラクターは、個々の座標変換オブジェクトのリストを表す、新しい CSSTransformValue オブジェクトを作成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformValue.entries() メソッドは、指定されたオブジェクト自身で列挙可能なプロパティ [key, value]のペアを for...in ループによって提供されるのと同じ順序の配列で返します(違いは for-in ループがプロトタイプチェーンでも同様に列挙するところです)。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformValue.forEach() メソッドは、指定された関数を CSSTransformValue の各要素に対して一度だけ実行します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| is2D は CSSTransformValue インターフェイスの読み取り専用プロパティで、この座標変換が 2D であるか 3D であるかを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformValue.keys() メソッドは、配列の各インデックスに対応するキーを格納した新しい 配列イテレーター オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| length は CSSTransformValue インターフェイスの読み取り専用プロパティで、リスト中の座標変換コンポーネントの数を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| toMatrix() は CSSTransformValue インターフェイスのメソッドで、 DOMMatrix オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTransformValue.values() は、 CSSTransformValue オブジェクトの各位置に対応する値を格納した新しい 配列イテレーター オブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model APIのCSSTranslateインターフェースは、CSSの個々のtransformプロパティのtransform-function/translate値を表します。これは親であるCSSTransformValueからプロパティとメソッドを継承します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTranslate()コンストラクタは、CSSの個々のtransformプロパティのtransform-function/translate値を表す新しいCSSTranslateオブジェクトを生成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTranslate インターフェースの x プロパティは、平行移動ベクトルの横軸または x 軸を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTranslate インターフェースの y プロパティは、平行移動ベクトルの縦軸または y 軸を取得および設定します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSTranslate インターフェースの z プロパティで、平行移動ベクトルの z 成分を表します。正の値を指定すると要素はビューアの方向に移動し、負の値を指定すると遠ざかる。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSS Typed Object Model API の CSSUnitValue インターフェースは、単一の単位型を含む値を表します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnitValue()コンストラクタは新しいCSSUnitValueオブジェクトを作成し、単一の単位型を含む値を表す新しいCSSUnitValueオブジェクトを返します。例えば、"42px" は CSSNumericValue で表されます。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnitValueインターフェイスのCSSUnitValue.unit読み取り専用プロパティは、単位タイプを示す文字列を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnitValueインターフェイスのCSSUnitValue.valueプロパティは、単位数を示すdoubleを返す。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnparsedValue は CSS 型付きオブジェクトモデルのインターフェイスで、カスタムプロパティを参照するプロパティ値を表します。これは、文字列の断片と変数の参照のリストから成ります。 | 66 | 79 | | 16.4 | 66 | 16.4 |
@@iterator [シンボル.イテレータ] | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnparsedValue() はコンストラクターで、カスタムプロパティのプロパティ値を表す新しい CSSUnparsedValue オブジェクトを生成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnparsedValue.entries() メソッドは、指定されたオブジェクトの列挙可能なプロパティ [key, value] の組の配列を、Statements/for...in ループで提供されるのと同じ順序で返します(違いは for-in ループがプロトタイプチェーン上のプロパティも列挙することです)。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnparsedValue.forEach() メソッドは、指定された関数を、CSSUnparsedValue オブジェクトのそれぞれの要素に対して実行します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnparsedValue.keys() メソッドは、配列内のそれぞれの添字のキーを持つ新しい配列イテレーターオブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| length は CSSUnparsedValue インターフェイスの読み取り専用プロパティで、オブジェクト内の項目数を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSUnparsedValue.values() メソッドは、 CSSUnparsedValue オブジェクト内のそれぞれの添字の値を持つ新しい配列イテレーターオブジェクトを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| CSSVariableReferenceValue は CSS 型付きオブジェクトモデル API のインターフェイスで、組み込み CSS 値のカスタム名を作成することができます。このオブジェクトは機能的に「CSS 変数」と呼ばれることがあり、 var 関数と同じ用途を提供します。カスタム名は 2 本のダッシュで始める必要があります。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| 新しい CSSVariableReferenceValue を生成します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| fallback は CSSVariableReferenceValue インターフェイスの読み取り専用プロパティで、この CSSVariableReferenceValue のカスタムプロパティ代替値を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| variable は CSSVariableReferenceValue インターフェイスのプロパティで、この CSSVariableReferenceValue のカスタムプロパティ名を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| computedStyleMap() は Element インターフェイスのメソッドであり、StylePropertyMapReadOnly インターフェイスで CSSStyleDeclaration の代替となる CSS 宣言ブロックの読み取り専用の表現を提供します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| attributeStyleMap は HTMLElement インターフェイスの読み取り専用のプロパティで、生きた StylePropertyMap を返します。これには、要素のインライン スタイル属性で定義されているか、スクリプト経由で HTMLElement インターフェイスの HTMLElement.style プロパティを使用して割り当てられた、要素のスタイルプロパティのリストが入ります。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| StylePropertyMap は CSS 型付きオブジェクトモデル API のインターフェイスで、CSSStyleDeclaration に代わる CSS 宣言ブロックの表現を提供するものです。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| append() は StylePropertyMap インターフェイスのメソッドで、渡された CSS の値をこの StylePropertyMap の指定されたプロパティで追加します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| clear() は StylePropertyMap インターフェイスのメソッドで、 StylePropertyMap にあるすべての宣言を削除します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| delete() は StylePropertyMap インターフェイスのメソッドで、指定されたプロパティの CSS 宣言を削除します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| set() は StylePropertyMap インターフェイスのメソッドで、指定したプロパティの CSS 宣言を変更します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| StylePropertyMapReadOnly は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSSStyleDeclaration の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 Element.computedStyleMap を使用してください。 | 66 | 79 | | 16.4 | 66 | 16.4 |
@@iterator [シンボル.イテレータ] | 66 | 79 | | 16.4 | 66 | 16.4 |
| StylePropertyMapReadOnly.entries() メソッドは、このオブジェクトが持つ列挙可能なプロパティの [key, value] の組の配列を、 Statements/for...in ループで提供されるのと同じ順序で返します(違いは for-in ループではプロトタイプチェーン内のプロパティも列挙する点です)。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| StylePropertyMapReadOnly.forEach() メソッドは、指定された関数を StylePropertyMapReadOnly のそれぞれの要素に対して 1 回ずつ呼び出します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| get() は StylePropertyMapReadOnly インターフェイスのメソッドで、指定されたプロパティの最初の値を CSSStyleValue で返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| getAll() は StylePropertyMapReadOnly インターフェイスのメソッドで、指定されたプロパティの値を含む CSSStyleValue オブジェクトの配列を返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| has() は StylePropertyMapReadOnly インターフェイスのメソッドで、指定されたプロパティが StylePropertyMapReadOnly オブジェクトにあるかどうかを示します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| StylePropertyMapReadOnly.keys() メソッドは、 StylePropertyMapReadOnly の各項目のキーを含む新しい配列イテレーターを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| size は StylePropertyMapReadOnly インターフェイスの読み取り専用プロパティで、 StylePropertyMapReadOnly オブジェクトの大きさを符号なし長整数で返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
| StylePropertyMapReadOnly.values() メソッドは、 StylePropertyMapReadOnly オブジェクトのそれぞれのインデックスに対応する値を含む新しい配列イテレーターを返します。 | 66 | 79 | | 16.4 | 66 | 16.4 |
- PaintWorkletには公開されていません。
- PaintWorkletには公開されていません。
- PaintWorkletには公開されていません。
- ブラウザの実験的フラグを有効にする必要があります
基本構文
// Retrieving a value (with type)
const width = el.computedStyleMap().get('width');
console.log(width.value, width.unit); // 100, 'px'
// Setting a value
el.attributeStyleMap.set('height', CSS.px(200)); ライブデモ
Set width with CSSUnitValue
Use attributeStyleMap and CSS.px when the typed OM API is available.
Computed style note
Read from computedStyleMap when available and show a safe fallback otherwise.
実務での使いどころ
-
CSS typed object model の活用
Experimental: これは実験的な機能です。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。