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显示隐藏层比较不错的方法分析
Sep 30 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python实现的发邮件功能示例
2019/09/11 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
海南地接欢迎词
2014/01/14 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Python 文字识别
2022/05/11 Python