SVGElement: style 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

SVGElement 的只读 style 属性以一个实时 CSSStyleProperties 对象的形式返回元素的内联 style。此对象可用于获取和设置元素的内联样式。

值

一个活动的 CSSStyleProperties 对象。

注意：规范的早期版本返回的是 CSSStyleDeclaration（CSSStyleProperties 派生自它）。有关浏览器支持信息，请参见浏览器兼容性表。

描述

元素 style 属性中设置的内联样式的取值，会体现在返回的 CSSStyleProperties 对象对应的属性上。

注意： CSSStyleProperties 具有破折号命名和对应的驼峰式命名的属性，用于表示浏览器支持的所有 CSS 属性（不仅仅是内联样式）。没有对应内联样式的属性将被设置为 ""。

元素的简写 CSS 属性会扩展为相应的长格式属性。例如，样式为 "border-top: 1px solid black" 的元素将在返回的对象中表示为名为 border-top 和 borderTop 的属性，以及相应的长写属性 border-top-color 和 borderTopColor、border-top-style 和 borderTopStyle、以及 border-top-width 和 borderTopWidth。

style 属性是只读的，这意味着无法将其赋值为一个 CSSStyleProperties 对象。然而，可以通过直接将一个字符串赋值给该属性来设置内联样式。在这种情况下，该字符串可以从 cssText 中读取。以这种方式使用 style 会完全覆盖元素上的所有内联样式。

为了在不更改其他样式值的情况下向元素添加特定样式，通常更倾向于在 CSSStyleProperties 对象上设置单独的属性。例如，您可以编写 element.style.backgroundColor = "red"。通过将样式声明设置为 null 或空字符串（例如 element.style.color = null）来重置样式声明。

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

示例

枚举样式信息

此示例演示了如何枚举 CSSStyleProperties 的破折号命名属性。

HTML

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="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="log"></pre>

#log {
  height: 70px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

以下代码迭代 CSSStyleProperties 的可枚举属性并记录结果。

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

// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // Check the property belongs to the CSSStyleProperties instance
  // Ensure the property is a numeric index (indicating a dash-named/inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop, 10))
  ) {
    log(
      `${
        elementStyle[prop]
      } = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
    );
  }
}

结果

结果如下所示。请注意，只有元素的 CSS 长写属性才是枚举值（内联简写属性未被枚举）。

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年10月13日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误