SVGElement: attributeStyleMap 属性

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

SVGElement 接口的只读属性 attributeStyleMap 返回一个活动的 StylePropertyMap 对象,该对象包含元素 style 内联属性中定义的样式属性列表,或者通过脚本使用 style 属性分配的样式属性列表。

简写属性会被展开。如果你设置 border-top: 1px solid black,则会设置长写属性(border-top-colorborder-top-styleborder-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

浏览器兼容性

另见