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 |
浏览器兼容性
加载中…