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

我们在通过浏览器开发者工具调试的时候，发现很多css的class我们可以通过编辑样式实现我们想要的效果，那么我们想要在原有的class上动态的插入新的class的时候该如何处理呢？我们这个时候可以采用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，然后为这些类添加样式，下载地址：http://pan.baidu.com/s/1o8wsIL0 密码：vjz0

未经允许不得转载：哈勃私语 » javaScript给元素添加多个class的简单实现

本文共1998个字创建时间：2017年10月31日16:18

相关推荐