StylePropertyMapReadOnly

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

StylePropertyMapReadOnly はCSS 型付きオブジェクトモデル API のインターフェイスで、CSSStyleDeclaration の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、Element.computedStyleMap() を使用してください。

プロパティ

StylePropertyMapReadOnly.size: StylePropertyMapReadOnly オブジェクトの大きさを、符号なし長整数値で返します。

メソッド

StylePropertyMapReadOnly.entries(): このオブジェクト自身の列挙可能なプロパティ[key, value] の組を、for...in ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。
StylePropertyMapReadOnly.forEach(): 指定された関数をStylePropertyMapReadOnly のそれぞれの要素について 1 回ずつ実行します。
StylePropertyMapReadOnly.get(): 指定されたプロパティの値を返します。
StylePropertyMapReadOnly.getAll(): 指定されたプロパティの値を含むCSSStyleValue オブジェクトの配列を返します。
StylePropertyMapReadOnly.has(): 指定されたプロパティがStylePropertyMapReadOnly オブジェクトにあるかどうかを示します。
StylePropertyMapReadOnly.keys(): StylePropertyMapReadOnly 内のそれぞれの項目のキーを含む新しい配列イテレーターを返します。
StylePropertyMapReadOnly.values(): StylePropertyMapReadOnly 内のそれぞれの項目の値を含む新しい配列イテレーターを返します。

例

観察するための要素を用意します。

html

<p>  これは、いくつかのテキストを含む段落です。 CSS  を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての  CSS プロパティ値が含まれます。</p><dl></dl>

出力をよりよくするに、カスタムプロパティで CSS を少々追加します。

css

p {  --someVariable: 1.6em;  --someOtherVariable: translateX(33vw);  --anotherVariable: 42;  line-height: var(--someVariable);}

JavaScript を追加して段落を取得し、Element.computedStyleMap() を使って、すべての既定の CSS プロパティ値の定義リストを返します。

// 要素を取得const myElement = document.querySelector("p");// 入力する <dl> を取得const stylesList = document.querySelector("#output");// computedStyleMap() ですべての計算済みスタイルを取得const stylePropertyMap = myElement.computedStyleMap();// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加for (const [prop, val] of stylePropertyMap) {  // プロパティ  const cssProperty = document.createElement("dt");  cssProperty.innerText = prop;  stylesList.appendChild(cssProperty);  // 値  const cssValue = document.createElement("dd");  cssValue.innerText = val;  stylesList.appendChild(cssValue);}