js动态修改css样式的四种方式

1.使用obj.style.[cssName]来修改样式表的类名。

obj.style.backgroundColor= "black";

对于用短划线分隔单词的css属性，改为驼峰式命名。
注意：通过style对象设置的样式都是内联样式，读取的也是内联样式。

2.使用obj.style.cssText来修改嵌入式的css

obj.style.cssText = "display:block;color:White";

与 方法一 一样，也是修改style属性

cssText也是有放回值的，在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值，但在IE中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号。

该方法会覆盖原有的style，可以使用累加的方法，但累加在IE中是无效的，可以在前面加分号避免IE去除最后的分号造成的问题。

3.使用obj.className来修改样式表的类名

//obj.className = "style2";
obj.setAttribute("class", "style2");

事先在样式表中设置好多种样式，通过修改元素的类名调整样式，上述为两种修改类名的方式

4.使用更改外联的css文件，从而改变元素的css

首先得引用外部的css文件，代码如下：

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
    var obj = document.getElementById("css");
    obj.setAttribute("href","css2.css");
}