javaScript给元素添加多个class的简单实现


Posted in Javascript onJuly 20, 2016

javaScript给元素添加多个class的简单实现

<html>
<head>



<style type="text/css">




.div2{




font-size:16px; 




color:orange;




}




.div3{




font-size:20px;




color:blue;




}



<style>



<script type="text/javascript">




[1]直接把样式赋值给className




var odiv=document.getElementById('div1');




odiv.className= div3




//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;




[2]使用累加赋值给className




var odiv=document.getElementById('div1');




odiv.className+=" "+div3  
//样式和样式之间需要空隙 ,所以加个空字符串隔开




//这样可以得到 class="div2 div3" 可以正常增加,但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式,如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";




[3]检测样式原先之前是否有相同的样式




var odiv=document.getElementById('div1'); 




function hasClass(element,csName){





element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式

 



}





[4]在[3]的基础上我们就可以进行判断性给元素添加样式了

 




var odiv=document.getElementById('div1'); 




function hasClass(element,csName){




 return  element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式



} 




function addClass(element,csName){




 if(!hasClass(element,csName)){





 element.className+=' '+csName;




}



addClass(odiv,'div3');



//这样就可以灵活给元素添加样式了;



【元素删除指定样式】


//同样先进行判断,在进行删除






 var odiv=document.getElementById('div1'); 



 function hasClass(element,csName){




 return  element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式



} 



 function deleteClass(element,csName){




 if(!hasClass(element,csName)){





 element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' ');  //利用正则捕获到要删除的样式的名称,然后把他替换成一个空白字符串,就相当于删除了



 }


 deleteClass(odiv,div3);
 


}



</script>


</head>


<body>



<div id="div1" class='div2'> 测试</div>


</body>

</html>

以上这篇javaScript给元素添加多个class的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
jquery拖动改变div大小
Jul 04 jQuery
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 #Javascript
JavaScript DOM 对象深入了解
Jul 20 #Javascript
JavaScript中的splice方法用法详解
Jul 20 #Javascript
Bootstrap被封装的弹层
Jul 20 #Javascript
必备的JS调试技巧汇总
Jul 20 #Javascript
JavaScript的==运算详解
Jul 20 #Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
JsChart组件使用详解
2018/03/04 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Vue infinite update loop的问题解决
2019/04/23 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
Python内置函数dir详解
2015/04/14 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
实习评语
2013/12/16 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
高中化学教学反思
2016/02/22 职场文书
请假条应该怎么写?
2019/06/24 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL