怎样访问和设置元素的CSS属性？

在JavaScript中，除了能够访问元素的HTML属性外，还能够访问和设置元素的css属性，访问和设置元素的CSS属性可分为以下两种方法。

1.使用style对象访问和设置元素的行内CSS属性

style对象是DOM对象的子对象，在建立了一个DOM对象后，可以使用style对象来访问和设置元素的行内CSS属性。语法如下:DOM元素.style.CSS属性名可以看出，用DOM访问CSS属性和访问HTML属性的区别在于CSS属性名前要有"style."。

说明:

①样式设置必须符号CSS规范，否则该样式会被忽略。

②如果样式属性名称中不带“一”号，如color，则直接使用style.color就可访问该属性值;如果样式属性名称中带有“一”号，如font-size，对应的style对象属性名称为fontSize。转换规则是去掉属性名称中的“一”，再把后面单词的第一个字母大写即可。又如border-left-style，对应的style对象属性名称为borderLeftStyle。

③对于CSS属性float，不能使用style.float访问，因为float是JavaScript的保留字，要访问该CSS属性，在IE中应使用style.styleFloat，在Firefox中应使用style.cssFloat。

④使用style对象只能读取到元素的行内样式，而不能获得元素所有的CSS样式。如果将上例中p元素的CSS样式改为嵌人式的形式，那么style对象是访问不到的。因此，style对象获取的属性与元素的最终显示效果并不一定相同，因为可能还有非行内样式作用于元素。

⑤如果使用style对象设置元素的CSS属性，而设置的CSS属性和元素原有的任何CSS属性冲突，由于style会对元素增加一个行内CSS样式属性，而行内CSS样式的优先级最高，因此通过style设置的样式一般为元素的最终样式。

如果要为当前元素设置多条CSS属性，可以使用styre对象的cssText方法。

2.使用className属性切换元素的类名

为元素同时设置多条CSS属性还可以将该元素原来的CSS属性和修改后的CSS属性分别写到两个类选择器中，再修改该元素的class类名以调用修改后的类选择器。

提示:如果要删除元素的所有类名，设置DOM元素.className=""即可。

3.使用className属性追加元素的类名

有时候元素可能已经应用了一个类选择器中的样式，如果想要使元素应用一个新的类选择器但又不能去掉原有的类选择器中的样式，则可以使用追加类名的方法，当然这种情况也可以通过style对象添加行内样式实现同样效果。但是当追加元素的类名不是为了控制该元素的样式，而是为了控制其子元素的样式(如下拉菜单)时，就只能用这种方法实现。

提示:在"与over之间的空格一定不能省略，因为CSS中为元素设置多个类别名的语法是class="test over"(多个类名间用空格隔开)，因此添加一个类名一定要在前面加空格。否则就变成了class="testover"，这显然不对。

4.使用replace方法去掉元素的某一个类名

如果要在元素已经应用了的几个类名中去掉其中的一个则可以使用replace方法，将类名替换为空即可。

假设元素的类名原来是class="test over"，则去掉后变成了class= "test"。要去掉的类名一定要用两斜杠"/"括起来，如果用引号，则在Firefox中会不起作用。

5.获取元素的最终CSS样式

可以通过下面的方式获取元素在浏览器中的最终样式(即所有CSS规则作用在一起得到的样式)。在IE和DOM兼容浏览器中获取最终样式的方式是不同的。

(1)IE:使用元素的currentStyle属性即可获得元素的最终样式。

(2)DOM兼容浏览器:使用document.defaultView.getComputedStyle方法获得最终样式。

通过以下的方法可以在各种浏览器中获取元素的最终样式:

function getCurrentStyle(element) {

if(element.currentStyle)         //IE支持

return element.currentStyle;

else

return document.defaultView.getComputedStyle(element,null); } //DOM支持

注意:元素的最终样式是只读的，因此通过上述方式只能读取最终样式，而无法修改样式。这使得在实际应用中获取元素的最终样式用途并不大。