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