javascript 动态修改css样式

Posted 2020-11-12 迪迪的博客

方法一：改变外联css文件，这里不讲这个。

方法二：通过改变claaName来改变样式，语法：

obj.className = "style2";

//或者

obj.setAttribute("class", "style2");

方法三：使用obj.style.cssTest，语法：

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

这个方法优点：

             可以这样添加好几个属性。

缺点：会把obj原来的cssText清掉，解决方案：使用累加，语法：

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

上面cssText累加的方法在IE中是无效的。

然而，可以在前面添加一个分号来解决这个问题：

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

注意：如果前面有样式表文件写着 div { text-decoration:underline; }，这个会被覆盖吗？不会！因为它不是直接作用于 html 元素的 style 属性。

方法四： 使用obj.style.backgroundColor,语法：

obj.style.backgroundColor= "black";

注意：backgroundColor可以换成其他属性，这里仅是示例，比如color，position等。

 

 

最后一个知识点：css Sprite，

就是有一张大图，通过控制background-position来实现显示大图的某一部分。可以用来制作动画。这个大图是作为background-image:。

优点是减少http请求，缺点是定位麻烦。维护麻烦。

具体用法请移步：https://blog.csdn.net/u011349149/article/details/24181675