Element: computedStyleMap() メソッド
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
computedStyleMap() は Element インターフェイスのメソッドであり、StylePropertyMapReadOnly インターフェイスで CSSStyleDeclaration の代替となる CSS 宣言ブロックの読み取り専用の表現を提供します。
構文
js
computedStyleMap()
引数
なし。
返値
StylePropertyMapReadOnly インターフェイスです。
例
まず、簡単な HTML から始めましょう。リンクのある段落と、すべての CSS プロパティと値の組を追加する定義リストです。
html
<p>
<a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>
いくらか CSS を追加します。
css
a {
--color: red;
color: var(--color);
}
JavaScript を追加してリンクを取得し、 computedStyleMap() を使用してすべての CSS プロパティ値の定義リストを返します。
js
// 要素を取得
const myElement = document.querySelector("a");
// 入力する <dl> を取得
const stylesList = document.querySelector("#regurgitation");
// すべての計算済みスタイルを computedStyleMap() で受け取る
const allComputedStyles = myElement.computedStyleMap();
// すべてのプロパティと値のマップを反復処理し、それぞれに <dt> と <dd> を追加します。
for (const [prop, val] of allComputedStyles) {
// プロパティ
const cssProperty = document.createElement("dt");
cssProperty.appendChild(document.createTextNode(prop));
stylesList.appendChild(cssProperty);
// 値
const cssValue = document.createElement("dd");
cssValue.appendChild(document.createTextNode(val));
stylesList.appendChild(cssValue);
}
computedStyleMap() に対応しているブラウザーでは、すべての CSS プロパティと値のリストが表示されます。
他のブラウザーでは、リンクが表示されるだけです。
リンクが持つ既定の CSS プロパティがいくつもあることに気づきましたか？ 'a' を 'p' に更新すると、margin-top と margin-bottom の既定の計算値の違いに気が付くでしょう。
仕様書
| 仕様書 |
|---|
| CSS Typed OM Level 1 # dom-element-computedstylemap |