HTMLElement: attributeStyleMap プロパティ
attributeStyleMap
は HTMLElement
インターフェイスの読み取り専用のプロパティで、生きた StylePropertyMap
を返します。これには、要素のインライン スタイル属性で定義されているか、スクリプト経由で HTMLElement
インターフェイスの style
プロパティを使用して割り当てられた、要素のスタイルプロパティのリストが入ります。
一括指定プロパティは展開されます。border-top: 1px solid black
を設定すると、代わりに個別指定プロパティ (border-top-color
, border-top-style
, border-top-width
) が設定されます。
style
プロパティと attributeStyleMap
プロパティの主な違いは、style
プロパティが CSSStyleDeclaration
オブジェクトを返すのに対し、attributeStyleMap
プロパティは StylePropertyMap
オブジェクトを返すことです。
このプロパティ自身は書き込みできませんが、style
プロパティを通じて返す CSSStyleDeclaration
オブジェクトと同様に、このプロパティが返す StylePropertyMap
オブジェクトを通じてインラインスタイルを読み書きすることができます。
値
生きた StylePropertyMap
オブジェクトです。
例
次のコードは style
属性と attributeStyleMap
プロパティの関係を示しています。
<div style="white-space: pre-line;">
<div id="el" style="border-top: 1px solid blue; color: red;">要素の例</div>
<div id="output"></div>
</div>
#el {
font-size: 16px;
}
const element = document.getElementById("el");
const output = document.getElementById("output");
for (const property of element.attributeStyleMap) {
output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
}
仕様書
Specification |
---|
CSS Typed OM Level 1 # dom-elementcssinlinestyle-attributestylemap |
ブラウザーの互換性
BCD tables only load in the browser