转：原生JS实现addClass,removeClass,toggleClass

最新推荐文章于 2019-12-23 14:48:09 发布

Eddie

最新推荐文章于 2019-12-23 14:48:09 发布

阅读量387

点赞数

原文地址：http://blog.csdn.net/lowkeysk/article/details/8063816

分类： js/jquery 2012-10-12 11:25 285人阅读评论(0) 收藏举报

jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.

在此写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

[html]view plaincopy 
    
 <style type="text/css">  
     div.testClass{  
         background-color:gray;  
     }  
 </style>  
   
 <script type="text/javascript">  
 function hasClass(obj, cls) {  
     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
 }  
   
 function addClass(obj, cls) {  
     if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
 }  
   
 function removeClass(obj, cls) {  
     if (hasClass(obj, cls)) {  
         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
         obj.className = obj.className.replace(reg, ' ');  
     }  
 }  
   
 function toggleClass(obj,cls){  
     if(hasClass(obj,cls)){  
         removeClass(obj, cls);  
     }else{  
         addClass(obj, cls);  
     }  
 }  
   
 function toggleClassTest(){  
     var obj = document. getElementById('test');  
     toggleClass(obj,"testClass");  
 }  
 </script>  
   
 <body>  
     <div id = "test" style = "width:250px;height:100px;">  
         sssssssssssss  
     </div>  
     <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
 </body>  