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

港控/mmm° 2021-09-14 02:48 605阅读 0赞

[jQuery][]操作class的方式非常强大

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

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

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

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

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

下面为一toggleClass的[测试][Link 1]例子

**\[html\]**  [view plain][]   [copy][view plain]

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****>**  
43.

[jQuery]: http://lib.csdn.net/base/jquery
[js]: http://lib.csdn.net/base/javascript
[Link 1]: http://lib.csdn.net/base/softwaretest
[view plain]: http://blog.csdn.net/lowkeysk/article/details/8063816#