StylePropertyMapReadOnly.get()

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

get() は StylePropertyMapReadOnly インターフェイスのメソッドで、指定されたプロパティの最初の値を CSSStyleValue で返します。

構文

var declarationBlock = StylePropertyMapReadOnly.get(property)

引数

property

値を取得するプロパティの名前です。

返値

CSSStyleValue オブジェクトです。

例

少しだけ、プロパティと値を取得してみましょう。まず、 HTML の段落の中にリンクを作成し、 JavaScript で入力する定義リストを追加しましょう。

<p>
   <a href="https://example.com">リンク</a>
</p>
<dl id="results"></dl>

カスタムプロパティや継承可能なプロパティなど、ちょっとした CSS を追加しています。

p {
  font-weight: bold;
}
a {
   --color: red;
   color: var(--color);
}

Element インターフェイスの computedStyleMap() を使用して、 StylePropertyMapReadOnly オブジェクトを返します。興味のあるプロパティの配列を作成し、 StylePropertyMapReadOnly の get() メソッドを使用してそれらの値のみを取得します。

// 要素を取得
const myElement = document.querySelector('a');

// すべての計算済みスタイルを `computedStyleMap` で受け取る
const styleMap = myElement.computedStyleMap();

// 入力する <dl> を取得
const stylesList = document.querySelector('#results');

// 関心のあるプロパティのリスト
const ofInterest = ['font-weight', 'border-left-color', 'color', '--color'];

// 関心のあるプロパティを反復処理
for ( let i = 0; i < ofInterest.length; i++ ) {

  // プロパティ
  const cssProperty = document.createElement('dt');
  cssProperty.innerText = ofInterest[i];
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement('dd');
  // use get() to find the value
  cssValue.innerText = styleMap.get(ofInterest[i]);
  stylesList.appendChild(cssValue);
}

仕様書

Specification
CSS Typed OM Level 1
# dom-stylepropertymapreadonly-get

ブラウザーの互換性

BCD tables only load in the browser

関連情報