StylePropertyMapReadOnly.get()

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

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

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

構文

var declarationBlock = StylePropertyMapReadOnly.get(property);

引数

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

返値

CSSStyleValue オブジェクトです。

例

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

html

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

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

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);
}

[フレーム]