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 上查看此页面 • 报告此内容的错误