方法一:改变外联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样式的更多相关文章

  1. javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  2. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  3. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  4. JavaScript动态修改CSS

    链接:https://www.cnblogs.com/aademeng/articles/6279060.html 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几 ...

  5. 使用JavaScript动态更改CSS样式

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  6. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  7. 微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)

    WXML <view class="page" style="background-color:{{pageBackgroundColor}}" > ...

  8. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...

  9. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)

    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...

随机推荐

  1. 高手养成计划基础篇-Linux第二季

    高手养成计划基础篇-Linux第二季   本文来源:i春秋社区-分享你的技术,为安全加点温度   前言 前面我们学习了文件处理命令和文件搜索命令,简单的了解了一下Linux,但是仅仅了解这样还不行,遇 ...

  2. Java面试题精选,大型网站系统架构你不得不懂的10个问题

    作者:JavaGuide(公众号) 下面这些问题都是一线大厂的真实面试问题,不论是对你面试还是说拓宽知识面都很有帮助.之前发过一篇8 张图读懂大型网站技术架构 可以作为不太了解大型网站系统技术架构朋友 ...

  3. 虚拟机安装mysql

    安装mysql8.0方法:  1.首先,ubuntu安装mysql8.0(此版本比较好装),所以要先更新一下源,去MySQL官网http://dev.mysql.com/downloads/repo/ ...

  4. 吴恩达机器学习笔记8-多变量线性回归(Linear Regression with Multiple Variables)--多维特征

    我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为(

  5. 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...

  6. SpringAop实操之记录关键业务请求数据

    AOP,中文名称,切面.在不影响业务代码情况下,实现想要的功能,是个真炫酷的事. aop是个好东西,记录日志是必须的. 记录数据也一样的,那么也是可以用aop来实现的,这里借助注解一起解决问题吧. 因 ...

  7. SpringCache学习实践

    1. SpringCache学习实践 1.1. 引用 <dependency> <groupId>org.springframework.boot</groupId> ...

  8. springboot下载文件

    例子 /** * 下载假期模板 */ @ResponseBody @RequestMapping(value = "/downloadDolidayTemplate.do") pu ...

  9. Spark基础-scala学习(一、入门)

    Scala解析器的使用 REPL:Read(取值)-> Evaluation(求值)-> Print(打印)->Loop(循环).scala解析器也被称为REPL,会快速编译scal ...

  10. Ubuntu下OpenCV版本切换

    1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...