SVGElement: attributeStyleMap 屬性
SVGElement 介面的只讀屬性 attributeStyleMap 返回一個活動的 StylePropertyMap 物件，該物件包含元素 style 內聯屬性中定義的樣式屬性列表，或者透過指令碼使用 style 屬性分配的樣式屬性列表。
簡寫屬性會被展開。如果你設定 border-top: 1px solid black，則會設定長寫屬性（border-top-color、border-top-style 和 border-top-width）。
style 屬性和 attributeStyleMap 屬性的主要區別在於，style 屬性將返回一個 CSSStyleDeclaration 物件，而 attributeStyleMap 屬性將返回一個 StylePropertyMap 物件。
儘管屬性本身是不可寫的，但你可以透過它返回的 StylePropertyMap 物件來讀寫內聯樣式，就像透過 style 屬性返回的 CSSStyleDeclaration 物件一樣。
值
一個即時的 StylePropertyMap 物件。
示例
以下程式碼片段展示了 style 屬性和 attributeStyleMap 屬性之間的關係
html
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 250 250"
width="250"
height="250">
<circle
cx="100"
cy="100"
r="50"
id="el"
style="border-top: 1px solid blue; color: red;" />
</svg>
<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 |
瀏覽器相容性
載入中…