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