HTML DOM style 属性

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

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

语法：

返回样式属性：

element.style.property

设置样式属性：

element.style.property　=　value

Ejemplo

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属性而不是Elemento .setAttribute("style", "...")方法，因为style属性不会覆盖style属性中可能指定的其他CSS属性。

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

属性
style	是	是	是	是	是

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

Valor de retorno:	UnCSSStyleDeclarationObjeto que representa la propiedad style del elemento
Versión DOM:	Modelo de Objetos CSS (CSSOM)

Obtener el valor superior del elemento <p>:

Ejemplo

var x = document.getElementById("demo").style.borderTop;

UsarElemento Método .setAttribute() para establecer estilos CSS:

Ejemplo

var div = document.querySelector("#myDiv");
div.setAttribute("style", "color:red; borde:　1px sólido azul;");

Tutoriales de CSS:Tutoriales de CSS