HTML DOM Element style 属性

定义和用法

style 属性返回元素的 style 属性的值，以 CSSStyleDeclaration 对象。

CSSStyleDeclaration 对象包含元素的所有行内样式属性。它不包含在 <head> 部分或任何外部样式表中设置的任何样式属性。

要点 1

您不能设置这样的样式：

element.style = "color:red";

您必须使用这样的 CSS 属性：

element.style.backgroundColor = "red";

亲自试一试

要点 2

JavaScript 语法与 CSS 语法略有不同：

backgroundColor / background-color

请参阅我们的 完整 Style 对象参考手册。

要点 3

请用这个 style 属性，而不是 setAttribute() 方法，以防止覆盖 style 属性中的其他属性。

另请参阅：

CSS 教程

CSS 参考手册

Style 对象

HTML <style> 标签

实例

例子 1

更改 "myH1" 的颜色：

document.getElementById("myH1").style.color = "red";

亲自试一试

例子 2

获取 "myP" 的上边框的值：

let value = document.getElementById("myP").style.borderTop;

亲自试一试

语法

返回 style 属性：

element.style.property

设置 style 属性：

element.style.property = value

属性值

值 描述
value

指定属性的值。

例如：

element.style.borderBottom = "2px solid red"

返回值

类型 描述
对象 元素的 CSSStyleDeclaration 对象。

浏览器支持

element.style 是 DOM Level 2 (2001) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持