HTMLElement: style 属性

style 属性是 HTMLElement 的只读属性，它以实时 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 保持原样（小写）。由于 float 是 JavaScript 中的保留关键字，因此此属性名称在历史上被转换为 cssFloat。所有现代浏览器现在都支持在 JavaScript 中直接使用 float 来访问 float CSS 属性，但 cssFloat 在旧版浏览器中使用，并且仍然作为现代浏览器中的别名受支持。
  • 如果属性由多个单词组成，并用连字符分隔，则连字符将被删除，并转换为驼峰式大小写：background-attachment 成为 backgroundAttachment。

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

值

一个实时 CSSStyleDeclaration 对象。

示例

获取样式信息

以下代码片段演示了使用元素的 style 属性获得的值与设置在 HTML 属性上的样式之间的关系

html
<!doctype html>
<html lang="en-US">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      An example div
    </div>
    <pre id="out"></pre>
  </body>
</html>
js
const element = document.getElementById("elt");
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`;
  }
}

注意 font-weight 未列为 elementStyle 的值，因为它未在元素本身的 style 属性中定义。相反，它是从其父级定义中继承的。还要注意，简写 border-top 属性（在 style 属性中定义）未直接列出。相反，它被三个相应的完整写属性（border-top-color、border-top-style 和 border-top-width）替换。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见