HTMLElement: style 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

HTMLElement 的只讀 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 屬性設定的內聯樣式宣告相同。

示例

基本用法

此程式碼示例演示瞭如何讀取元素的內聯樣式。在每種情況下，它都使用 getPropertyValue() 讀取破折號命名的樣式屬性，並透過點運算子獲取駝峰式命名的屬性。

HTML

首先，我們定義一個 <div> 元素和巢狀元素，它們使用簡寫和長寫形式定義了不同的內聯樣式。

html

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
  <pre id="log"></pre>
</div>

#log {
  height: 200px;
  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;
}

以下程式碼獲取內部元素，讀取其樣式，並記錄破折號命名和駝峰式命名的 CSS 樣式屬性。

const element = document.getElementById("elt");
const elementStyle = element.style;

// Longhand styles
log(`"border-top" = '${elementStyle.getPropertyValue("border-top")}'`);
log(`"borderTop" = '${elementStyle.borderTop}'`);

// Expanded longhand styles
log(
  `"border-top-width" = '${elementStyle.getPropertyValue("border-top-width")}'`,
);
log(`"borderTopWidth" = '${elementStyle.borderTopWidth}'`);

log(
  `"border-top-style" = '${elementStyle.getPropertyValue("border-top-style")}'`,
);
log(`"borderTopStyle" = '${elementStyle.borderTopStyle}'`);

log(
  `"border-top-color" = '${elementStyle.getPropertyValue("border-top-color")}'`,
);
log(`"borderTopColor" = '${elementStyle.borderTopColor}'`);

// Original shorthand style
log(`"color" = '${elementStyle.getPropertyValue("color")}'`);
log(`"color" = '${elementStyle.color}'`);

// Defined on parent
log(`"font-weight" = '${elementStyle.getPropertyValue("font-weight")}'`);
log(`"fontWeight" = '${elementStyle.fontWeight}'`);

結果

結果如下所示。在每種情況下，我們都看到使用破折號和駝峰式命名屬性讀取的樣式是相同的。我們還看到，元素 style 屬性對應的 border-top 屬性存在，並且其每個部分都定義了一個長寫屬性（border-top-color、border-top-style 和 border-top-width）。

請注意，font-weight 在 CSSStyleProperties 上定義（所有其他 CSS 屬性也是如此，儘管我們沒有記錄它們）。然而，它不是巢狀元素的內聯樣式，因此其值被設定為空字串（""）。

列舉樣式資訊

此示例演示瞭如何列舉 CSSStyleProperties 的破折號命名屬性。

HTML

首先，我們定義一個 <div> 元素和巢狀元素，它們使用簡寫和長寫形式定義了不同的內聯樣式。這與前一個示例中的 HTML 相同。

html

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
  <pre id="log"></pre>
</div>

#log {
  height: 100px;
  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.getElementById("elt");
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 長寫屬性才是列舉值（內聯簡寫屬性未被列舉）。

更新邊框樣式

html

<div id="box"></div>

<form name="FormName">
  <button id="btn1">Make border 20px-wide</button>
  <button id="btn2">Make border 5px-wide</button>
</form>

css

#box {
  border: 5px solid green;
  width: 100px;
  height: 100px;
}

function setBorderWidth(width) {
  document.getElementById("box").style.borderWidth = `${width}px`;
}

document.getElementById("btn1").addEventListener("click", () => {
  setBorderWidth(20);
});
document.getElementById("btn2").addEventListener("click", () => {
  setBorderWidth(5);
});

操作樣式

在此示例中，透過元素上的 style 物件及其 CSS 樣式屬性來訪問 HTML 段落元素的一些基本樣式屬性，這些屬性可以從 DOM 中檢索和設定。在這種情況下，您正在直接操作各個樣式。您也可以使用 styleSheets 及其規則來更改整個文件的樣式。

html

<p id="pid">Some text</p>
<form>
  <p><button type="button">Change text</button></p>
</form>

function changeText() {
  const p = document.getElementById("pid");

  p.style.color = "blue";
  p.style.fontSize = "18pt";
}

document.querySelector("button").addEventListener("click", () => {
  changeText();
});

規範

規範
CSS 物件模型 (CSSOM) # dom-elementcssinlinestyle-style

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年10月13日⁩，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤