HTML DOM style 属性

style属性设置或返回元素的内联样式。

它返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性的列表，并为该元素的内联样式属性中定义的属性分配了值。

语法：

返回样式属性：

element.style.property

设置样式属性：

element.style.property = value

示例

document.getElementById("demo").style.color = "blue";

注意：无法通过将字符串分配给style属性来设置样式，例如element.style="color：blue;"。要设置元素的样式，请在样式后面附加一个"CSS"属性并指定一个值，如下所示：

element.style.backgroundColor="blue"; //将元素的背景色设置为蓝色

正如您看到的，用于设置CSS属性的JavaScript语法与CSS(backgroundColor而不是background-color)略有不同。

有关所有可用属性的列表，请参见样式对象参考。

style属性对于完全了解应用于元素的样式没有用，因为它仅表示元素的内联样式属性中设置的CSS声明，而不表示来自其他地方的样式规则(例如本节中的样式规则)的CSS声明，或者外部样式表。要获取元素的所有CSS属性的值，应改用window.getComputedStyle()。

但是，可以使用document.getElementsByTagName()从<head>访问<style>元素：

var x = document.getElementsByTagName("style")[0]; //获取第一个<style>元素

注意：建议使用style属性而不是元素 .setAttribute("style"，"...")方法，因为style属性不会覆盖style属性中可能指定的其他CSS属性。

所有浏览器完全支持style属性：

属性
style	是	是	是	是	是

值	描述
value	指定指定属性的值。例如，对于border属性： element.style.border="5px纯蓝色";

返回值：	一个CSSStyleDeclaration对象，表示元素的style属性
DOM版本：	CSS对象模型(CSSOM)