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中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C# 动态修改CSS样式 wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- JavaScript动态修改CSS
链接:https://www.cnblogs.com/aademeng/articles/6279060.html 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几 ...
- 使用JavaScript动态更改CSS样式
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- JavaScript访问修改css样式表
1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...
- 微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)
WXML <view class="page" style="background-color:{{pageBackgroundColor}}" > ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)
原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...
随机推荐
- 高手养成计划基础篇-Linux第二季
高手养成计划基础篇-Linux第二季 本文来源:i春秋社区-分享你的技术,为安全加点温度 前言 前面我们学习了文件处理命令和文件搜索命令,简单的了解了一下Linux,但是仅仅了解这样还不行,遇 ...
- Java面试题精选,大型网站系统架构你不得不懂的10个问题
作者:JavaGuide(公众号) 下面这些问题都是一线大厂的真实面试问题,不论是对你面试还是说拓宽知识面都很有帮助.之前发过一篇8 张图读懂大型网站技术架构 可以作为不太了解大型网站系统技术架构朋友 ...
- 虚拟机安装mysql
安装mysql8.0方法: 1.首先,ubuntu安装mysql8.0(此版本比较好装),所以要先更新一下源,去MySQL官网http://dev.mysql.com/downloads/repo/ ...
- 吴恩达机器学习笔记8-多变量线性回归(Linear Regression with Multiple Variables)--多维特征
我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为(
- 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...
- SpringAop实操之记录关键业务请求数据
AOP,中文名称,切面.在不影响业务代码情况下,实现想要的功能,是个真炫酷的事. aop是个好东西,记录日志是必须的. 记录数据也一样的,那么也是可以用aop来实现的,这里借助注解一起解决问题吧. 因 ...
- SpringCache学习实践
1. SpringCache学习实践 1.1. 引用 <dependency> <groupId>org.springframework.boot</groupId> ...
- springboot下载文件
例子 /** * 下载假期模板 */ @ResponseBody @RequestMapping(value = "/downloadDolidayTemplate.do") pu ...
- Spark基础-scala学习(一、入门)
Scala解析器的使用 REPL:Read(取值)-> Evaluation(求值)-> Print(打印)->Loop(循环).scala解析器也被称为REPL,会快速编译scal ...
- Ubuntu下OpenCV版本切换
1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...