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.
只读属性 style
以 CSSStyleDeclaration
实时对象(Live Object)的形式返回元素的内联样式,该对象包含该元素的所有样式属性列表,只为元素的内联 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
(也保持小写)。 - 如果属性是由若干个单词组成的,由横线分隔,则横线被移除,并转化为驼峰形式:如
background-attachment
转换为backgroundAttachment
。 - 作为 JavaScript 保留关键字的
float
属性被转化为cssFloat
。
通过 style
属性设置的样式优先级与内联样式声明相同。
值
一个实时的 CSSStyleDeclaration
对象。
示例
获取样式信息
以下代码片段演示了从元素的 style
属性获得的值如何与 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>
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-color
、border-top-style
和 border-top-width
)取代。
规范
Specification |
---|
CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |
浏览器兼容性
BCD tables only load in the browser