SVGElement：style 属性

SVGElement 的只读style属性以活动的 CSSStyleDeclaration 对象的形式返回元素的内联样式，该对象包含该元素的所有样式属性的列表，其值仅为元素的内联 style 属性中定义的属性分配。

简写属性会展开。如果您设置 style="border-top: 1px solid black"，则会设置完整属性（border-top-color、border-top-style 和 border-top-width）。

此属性为只读，这意味着无法向其分配 CSSStyleDeclaration 对象。但是，可以通过直接将字符串分配给 style 属性来设置内联样式。在这种情况下，字符串将转发到 CSSStyleDeclaration.cssText。以这种方式使用 style 将完全覆盖元素上的所有内联样式。

因此，要向元素添加特定样式而不更改其他样式值，通常最好在 CSSStyleDeclaration 对象上设置单个属性。例如，您可以编写 element.style.backgroundColor = "red"。

通过将其设置为 null 或空字符串来重置样式声明，例如，elt.style.color = null。

注意：CSS 属性名称会根据以下规则转换为 JavaScript 标识符

如果属性由一个单词组成，则保持不变：height 保持不变（小写）。
如果属性由多个单词组成，并用连字符分隔，则会删除连字符并将其转换为驼峰式大小写：background-attachment 变成 backgroundAttachment。
属性 float 作为保留的 JavaScript 关键字，将转换为 cssFloat。

style 属性在 CSS 层叠中具有与通过 style 属性设置的内联样式声明相同的优先级。

<svg
  width="50"
  height="50"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    id="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="out"></pre>

const element = document.querySelector("circle");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // We check if the property belongs to the CSSStyleDeclaration instance
  // We also ensure that the property is a numeric index (indicating an inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

规范

规范
CSS 对象模型 (CSSOM) # dom-elementcssinlinestyle-style

浏览器兼容性

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

SVGElement：style 属性

值

示例

获取样式信息

规范

浏览器兼容性

另请参阅