HTMLElement: attributeStyleMap 屬性
HTMLElement 介面的只讀屬性 attributeStyleMap 返回一個即時的 StylePropertyMap 物件,該物件包含元素內聯 style 屬性中定義的樣式屬性列表,或透過指令碼透過 屬性分配給 styleHTMLElement 介面的樣式屬性列表。
簡寫屬性會被展開。如果你設定 border-top: 1px solid black,則會設定長寫屬性(border-top-color、border-top-style 和 border-top-width)。
屬性和 styleattributeStyleMap 屬性的主要區別在於,style 屬性返回一個 CSSStyleDeclaration 物件,而 attributeStyleMap 屬性返回一個 StylePropertyMap 物件。
儘管屬性本身是不可寫的,但你可以透過它返回的 StylePropertyMap 物件來讀寫內聯樣式,就像透過 style 屬性返回的 CSSStyleDeclaration 物件一樣。
值
一個即時的 StylePropertyMap 物件。
示例
以下程式碼片段展示了 style 屬性和 attributeStyleMap 屬性之間的關係
html
<div id="el" style="border-top: 1px solid blue; color: red;">
An example element
</div>
<div id="output"></div>
css
#el {
font-size: 16px;
}
#output {
white-space: pre-line;
}
js
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`;
}
規範
| 規範 |
|---|
| CSS 型別化 OM Level 1 # dom-elementcssinlinestyle-attributestylemap |
瀏覽器相容性
載入中…