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 上檢視此頁面 • 報告此內容的錯誤