方法一:改变外联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. Nerd的套现ATM机

    Nerd是一群似乎只在学生阶段才出尽风头的人.不善言辞,闷头学习,每遇考试便战功赫赫风光无限,赢得天下名.这样的描述,对那些成绩一般.喜欢天马行空.甚至有些多动症倾向的人来讲,无异于是噩梦.幸好有社会 ...

  2. express使用记录

    express使用记录 文章用啥写?→→ VsCode. 代码用啥写?→→ VsCode. 编辑器下载:VsCode 一.windows下安装node.js环境: 下载地址 相比以前搭过的服务端语言的 ...

  3. Java项目启动时执行指定方法的几种方式

    很多时候我们都会碰到需要在程序启动时去执行的方法,比如说去读取某个配置,预加载缓存,定时任务的初始化等.这里给出几种解决方案供大家参考. 1. 使用@PostConstruct注解 这个注解呢,可以在 ...

  4. Python面向对象5:类的常用魔术方法

    魔术方法就是不需要人为调用的方法,基本是在特定的时刻自动触发- 魔术方法的统一的特征,方法名被前后各两个下滑线包裹 - 操作类 - `__init__`: 构造函数 - `__new__`: 对象实例 ...

  5. HTML5之日历控件

    HTML5定义了几个与日期有关的新控件.支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择. 以下测试和截图都是在谷歌浏览器完成的,其他浏览器可能略有差异. 1.日期时间控件 HTML代码: ...

  6. 读《Linux Shell脚本攻略》(第2版) 一遍、二遍体会

    前段时间读完了<Linux Shell脚本攻略>(第2版)这本书,给部分想读这本书的人分享下个人感受. 第一遍体会解读:就像黑夜中的灯塔,指明前进的道路. 推荐指数:强烈推荐. 书中讲解的 ...

  7. 数字(Number)类型(一)

    多行语句 Python 通常是一行写完一条语句,但如果语句很长,我们可以使用反斜杠(\)来实现多行语句,例如: total = item_one + \ item_two + \ item_three ...

  8. DCT(离散余弦变换)算法原理和源码(python)

    原理: 离散余弦变换(DCT for Discrete Cosine Transform)是与傅里叶变换相关的一种变换,它类似于离散傅里叶变换(DFT for Discrete Fourier Tra ...

  9. npm ERR! Refusing to install package with name "webpack" under a package -----

    当我们在安装以一些依赖的时候会提示以下报错--------- 问题出在: 这个name 不能使用所需要安装包的名字! 解决方案----- 修改下就行 -- -我将wenpack 改成webpack1 ...

  10. Spring Boot 的 10 个核心模块

    学习 Spring Boot 必须得了解它的核心模块,和 Spring 框架一样,Spring Boot 也是一个庞大的项目,也是由许多核心子模块组成的. 你所需具备的基础 告诉你,Spring Bo ...