Element: computedStyleMap() メソッド

Limited availability

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

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-topmargin-bottom の既定の計算値の違いに気が付くでしょう。

仕様書

Specification
CSS Typed OM Level 1
# dom-element-computedstylemap

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
computedStyleMap

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.