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

时间:2025-03-18 22:20:59
  • <style type="text/css">  
  •     {  
  •         background-color:gray;  
  •     }  
  • </style>  
  •   
  • <script type="text/javascript">  
  • function hasClass(obj, cls) {  
  •     return (new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
  • }  
  •   
  • function addClass(obj, cls) {  
  •     if (!(obj, cls))  += " " + cls;  
  • }  
  •   
  • function removeClass(obj, cls) {  
  •     if (hasClass(obj, cls)) {  
  •         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
  •          = obj.(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>