获取元素样式

在任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式标经层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的属性。对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式，才能通过JavaScript来访问。下表列出了几个常见的CSS属性及其在style对象中对应的属性名。

多数情况下，都可以通过简单地转换属性名格式来实现转换。其中一个不能直接转换的CSS属性就是float。由于float是JavaScript中的保留字，因此不能用作属性名。“DOM2级样式”规范规定样式对象上相应的属性名应该是CSSFloat；Firefox、Safari、Opera和Chrom都支持这个属性，而IE支持的则是styleFloat。

只要取得一个有效的DOM元素的引用，就可以随时使用JavaScript为其设置样式。以下是几个例子：

var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
myDiv.style.width = "100px";
myDiv.style.height = "200px";
myDiv.style.border = "5px solid black";

在标准模式下，所有度量值都必须指定一个度量单位。在混杂模式下，可以将style.width设置为“20px”；但在标准模式下，将style.width设置为“20”会导致被忽略——因为没有度量单位。在实践中，最好始终都指定度量单位。

通过style对象同样可以取得在style特性中指定的样式。以下面的HTML代码为例：

<div id="myDiv" style="background-color:blue; width:10px; height:25px"></div>

在style特性中指定的样式信息可以通过下列代码取得：

alert(myDiv.style.backgroundColor);
alert(myDiv.style.width);
alert(myDiv.style.height);

如果没有为元素设置style属性，那么style对象中可能会包含一些默认的值，但这些值并不能准确地反映该元素的样式信息。