javascript 动态修改css样式

Posted 迪迪的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 动态修改css样式相关的知识,希望对你有一定的参考价值。

方法一:改变外联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

 

以上是关于javascript 动态修改css样式的主要内容,如果未能解决你的问题,请参考以下文章

利用javascript实现css操作

超实用!JavaScript修改CSS变量,达到动态修改样式的目的

javascript 动态修改css样式

使用 JavaScript 动态应用 CSS

HTML JS动态设置CSS样式

用JavaScript修改CSS属性的代码