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的测试例子

    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>  
  • 相关阅读:
    【Hive】HiveQL:数据定义
    【Hive】Hive安装与配置
    【Hadoop】Hadoop 2.7.6安装_伪分布式集群
    【RMAN】单实例环境RMAN备份和还原
    【SQL开发】Oracle 11g 分区技术
    【SQL开发】使用绑定变量 VS 不使用绑定变量
    MySQL索引最左前缀原则导致系统瘫痪
    阿里云RDS在线DDL工具gh-ost
    centos7下MongoDB3.4安装并解决告警
    ibtmp1文件过大
  • 原文地址:https://www.cnblogs.com/tengzhouboy/p/2986581.html
Copyright © 2011-2022 走看看