首页 » DOM » JavaScript访问元素样式

JavaScript访问元素样式

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

CSS属性JavaScript属性
background-imagestyle.backgroundImage
colorstyle.color
displaystyle.display
font-familystyle.fontFamliy

多数情况下,都可以通过简单地转换属性名格式来实现转换。其中一个不能直接转换的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对象中可能会包含一些默认的值,但这些值并不能准确地反映该元素的样式信息。

此文章发表在 DOM. 将 固定链接 加入收藏.