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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Node.js中的http请求客户端示例(request client)
May 04 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
详解vue 组件
Jun 11 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/12/07 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
表单内同名元素的控制
2006/11/22 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python实现线程池代码分享
2015/06/21 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python执行时间的计算方法小结
2017/03/17 Python
python实现网页自动签到功能
2019/01/21 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
大一军训感言
2014/01/09 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
安全生产承诺书范文
2014/05/22 职场文书
化学教育专业求职信
2014/07/08 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
民主生活会意见
2015/06/05 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python