原生js来实现对dom元素class的操作方法

jQuery操作class的方式非常强大

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

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

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

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

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


下面为一toggleClass的测试例子

[html]  view plain  copy
  1. <style type="text/css">  
  2.     div.testClass{  
  3.         background-color:gray;  
  4.     }  
  5. style>  
  6.   
  7. <script type="text/javascript">  
  8. function hasClass(obj, cls) {  
  9.     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
  10. }  
  11.   
  12. function addClass(obj, cls) {  
  13.     if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
  14. }  
  15.   
  16. function removeClass(obj, cls) {  
  17.     if (hasClass(obj, cls)) {  
  18.         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
  19.         obj.className = obj.className.replace(reg, ' ');  
  20.     }  
  21. }  
  22.   
  23. function toggleClass(obj,cls){  
  24.     if(hasClass(obj,cls)){  
  25.         removeClass(obj, cls);  
  26.     }else{  
  27.         addClass(obj, cls);  
  28.     }  
  29. }  
  30.   
  31. function toggleClassTest(){  
  32.     var obj = document. getElementById('test');  
  33.     toggleClass(obj,"testClass");  
  34. }  
  35. script>  
  36.   
  37. <body>  
  38.     <div id = "test" style = "width:250px;height:100px;">  
  39.         sssssssssssss  
  40.     div>  
  41.     <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
  42. body>  

你可能感兴趣的:(JavaScript)