HTMLElement:style 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

只读属性 styleCSSStyleDeclaration 实时对象(Live Object)的形式返回元素的内联样式,该对象包含该元素的所有样式属性列表,只为元素的内联 style 属性中定义的属性分配值。

简写属性会展开。如果设置了 style="border-top: 1px solid black",会设置完整属性(border-top-colorborder-top-styleborder-top-width)。

该属性是只读的,意味着不可以将 CSSStyleDeclaration 对象赋值给它。然而,可以通过直接给 style 属性分配一个字符串来设置内联样式。在这种情况下,这个字符串被转发到 CSSStyleDeclaration.cssText。以这种方式使用 style 将完全覆盖该元素的所有内联样式。

因此,要在不改变其他样式值的情况下为一个元素添加特定的样式,通常最好是在 CSSStyleDeclaration 对象上设置个别属性。例如,你可以写成 element.style.backgroundColor = "red"

样式声明可通过设置它为 null 或空字符串来重置,比如 elt.style.color = null

备注: 通过这些规则,CSS 属性名称被转换为 JavaScript 标识符:

  • 如果属性是由一个单词组成的,则保持原样:如 height(也保持小写)。
  • 如果属性是由若干个单词组成的,由横线分隔,则横线被移除,并转化为驼峰形式:如 background-attachment 转换为 backgroundAttachment
  • 作为 JavaScript 保留关键字的 float 属性被转化为 cssFloat

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

一个实时的 CSSStyleDeclaration 对象。

示例

获取样式信息

以下代码片段演示了从元素的 style 属性获得的值如何与 HTML 属性上设置的样式相关。

html
<!doctype html>
<html lang="zh-CN">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      一个简单的 div
    </div>
    <pre id="out"></pre>
  </body>
</html>
js
const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;

// 我们迭代所有的样式(for…of 对 CSStyleDeclaration 无效)
for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

注意,font-weight 没有被列为 elementStyle 的一个值,因为它没有被定义在元素本身的 style 属性中。相反,它是从其父级元素的定义中继承的。还要注意的是,在 style 属性中定义的简写属性 border-top,没有直接列出。相反,它被三个相应的完整属性(border-top-colorborder-top-styleborder-top-width)取代。

规范

Specification
CSS Object Model (CSSOM)
# dom-elementcssinlinestyle-style

浏览器兼容性

BCD tables only load in the browser

参见