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

本文转载于:猿2048➞https://www.mk2048.com/blog/blog.php?id=kbhijib&title=javascript 动态修改css样式

javascript 动态修改css样式相关推荐

javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
javascript、jquery 动态修改css样式方法
javascript.jquery 动态修改css样式方法 javascript 修改样式的方法第一种.使用obj.className来修改样式表的类名 var obj = document.get ...
asp.net 动态修改css样式,ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C#动态修改CSS样式 wonsoft(wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个Butt ...
jquery怎么动态修改css样式
jquery动态修改css样式的方法:1.通过css方法动态修改css样式:2.给指定的html元素定一个CSS样式:3.查看元素的css样式:4.隐藏与显示p或指定的其他html元素. jquery ...
jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
微信小程序wxss---对应css样式（动态修改css样式）
微信中wxss有些类似于scss,可以引用外联样式.但是不知道怎么继承css样式下图是微信中动态绑定css样式,实现css样式的动态修改
js动态修改css样式
//获取一个HTMLCollections,可以理解为HTML元素数组 var list = document.getElementsByClassName("block"); / ...
Vue中动态使用JavaScript修改CSS样式
文章目录前言一.实现目标效果的难点二.使用Computed配合CSS变量完成动态修改CSS 1.设置Computed属性以及slider行内属性 2. 设置css样式(这里使用的是原生css,l ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...

javascript 动态修改css样式

javascript 动态修改css样式相关推荐

最新文章

热门文章