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-top と margin-bottom の既定の計算値の違いに気が付くでしょう。
仕様書
| Specification |
|---|
| CSS Typed OM Level 1 # dom-element-computedstylemap |
ブラウザーの互換性
Loading…