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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
js的写法基础分析
Jan 17 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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 iconv函数的使用详解
2013/06/09 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python对数据库操作
2016/03/28 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
幼教个人求职信范文
2013/12/02 职场文书
公司董事长职责
2013/12/12 职场文书
学生自我评价范文
2014/02/02 职场文书
学校课外活动总结
2014/05/08 职场文书
根叔历年演讲稿
2014/05/20 职场文书
新手上路标语
2014/06/20 职场文书
商场周年庆活动方案
2014/08/19 职场文书
国庆节活动总结
2014/08/26 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
营业用房租赁协议书
2014/11/26 职场文书
校运会班级霸气口号
2015/12/24 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python