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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 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上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
javascript基础知识
2016/06/07 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python实现简单图片物体标注工具
2019/03/18 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
行政管理专业求职信
2014/07/06 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python