SVGElement：attributeStyleMap 属性

attributeStyleMap 是 SVGElement 接口的只读属性，它返回一个实时的 StylePropertyMap 对象，该对象包含元素内联 style 属性中定义的或使用 style 属性（通过脚本）分配给 SVGElement 接口的样式属性列表。

简写属性会被展开。如果设置 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
<div style="white-space: pre-line;">
  <svg
    width="50"
    height="50"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 250 250"
    width="250"
    height="250"
    style="white-space: pre-line;">
    <circle
      cx="100"
      cy="100"
      r="50"
      id="el"
      style="border-top: 1px solid blue; color: red;" />
  </svg>
  <div id="output"></div>
</div>
css
#el {
  font-size: 16px;
}
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 Typed OM 第 1 级
# dom-elementcssinlinestyle-attributestylemap

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅