zoukankan      html  css  js  c++  java
  • 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
            <div id = "test" style = "250px;height:100px;">  
                sssssssssssss  
            </div>  
            <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
        </body>
    </html>
        <style type="text/css">  
            div.testClass{  
                background-color:gray;  
            }  
        </style>  
          
        <script type="text/javascript">  
        function hasClass(obj, cls) {  
            return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));  
        }  
          
        function addClass(obj, cls) {  
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
        }  
          
        function removeClass(obj, cls) {  
            if (hasClass(obj, cls)) {  
                var reg = new RegExp('(\s|^)' + cls + '(\s|$)');  
                obj.className = obj.className.replace(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>  
          
        

  • 相关阅读:
    Linux使用lrzsz上传下载文件
    开发Wordpress主题时没有特色图片的功能
    Windows10重启之后总是将默认浏览器设置为IE
    C#泛型类的类型约束
    CentOS给网站配置Https证书
    从微软官网下载VS离线安装包的方法
    Azure Sql Database为某个数据库创建单独的访问账户
    VS2017/2019 Product Key
    VMware Workstation/Fusion 14/15 密钥
    将DataTable进行分页并生成新的DataTable
  • 原文地址:https://www.cnblogs.com/dearxinli/p/3873485.html
Copyright © 2011-2022 走看看