zoukankan      html  css  js  c++  java

  • 原生JS实现addClass,removeClass,toggleClass

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

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

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

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

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

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

     

    下面为一toggleClass的测试例子

    [html] view plaincopy
    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 = "250px;height:100px;">  
    39.         sssssssssssss  
    40.     </div>  
    41.     <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
    42. </body>  
  • 相关阅读:
    七、Vue Cli+ApiCloud
    六、取消eslint 校验代码
    六、匿名方法
    五、vue中export和export default的使用
    四、Vue CLI-异步请求（axios）
    接口自动化测试（7）
    selenium 封装
    flask 动手写的接口平台
    flask入门篇
    python 自动化接口测试（6）
  • 原文地址：https://www.cnblogs.com/tengzhouboy/p/2986581.html
Copyright © 2011-2022 走看看