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


Posted in Javascript onAugust 27, 2015

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

1、使用obj.className来修改样式表的类名。

2、使用obj.style.cssTest来修改嵌入式的css。

3、使用obj.className来修改样式表的类名。

4、使用更改外联的css文件,从而改变元素的css

下面是一段html代码和css代码用来解释上面方法的区别的。

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

<div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div id="tool">
   <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
   <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
   <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
   <input type="button" value="更改外联css样式" onclick="recover()" />
  </div>
 </div>

方法一、使用obj.className来修改样式表的类名

从下面的代码可以看出ob.style.cssTest是如何来btnB的样式的。

function changeStyle1() {
   var obj = document.getElementById("btnB");
   obj.style.backgroundColor= "black";

 }

该段代码修改btB的文字的颜色,在浏览器中打开调试工具,可以发现btB标签中多了一个属性【style="内联式>外联式。而btB的hove伪类的background-color样式写在内联式中,所以嵌入式的background-color覆盖了伪类中,这就使得鼠标放入btB上感觉不到背景颜色的变化。

方法二、使用obj.style.cssTest来修改嵌入式的css

直接上JavaScript代码:

function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black; display:block;color:White;

}

该段代码和【一】中的效果是一样的,缺陷也是一样。

方法三、使用obj.className来修改样式表的类名

使用代码来修改btB引用样式的类名,如下段代码:

function changeStyle3() {
   var obj = document.getElementById("btnB");
   //obj.className = "style2";
   obj.setAttribute("class", "style2");
 }

通过更改btB的css的类名的方式来更改样式,更改样式类名有两种方式。1、obj.className = "style2";  2、 obj.setAttribute("class", "style2");都是一样的效果。

用这种方式来修改css比上面的效果要好很多。

方法四、使用更改外联的css文件,从而改变元素的css

通过更改外联的css文件引用从而来更改btB的样式,操作很简单。代码如下:

首先得引用外联的css文件,代码如下:

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

这样也能方便的更改btB的样式,个人觉得这种方式是最好用的,是实现整体页面换肤的最佳方案。

Javascript 相关文章推荐
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 #Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
You might like
PHP设计模式之装饰者模式
2012/02/29 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python flask框架post接口调用示例
2019/07/03 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python如何进行时间处理
2020/08/06 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
自荐书模板
2013/12/19 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
音乐节策划方案
2014/06/09 职场文书
销售员岗位职责
2014/06/09 职场文书
医院领导班子整改方案
2014/10/01 职场文书
邀请函的格式
2015/01/30 职场文书
退休欢送会主持词
2015/07/01 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
战友聚会致辞
2015/07/28 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL