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>  
          
        

  • 相关阅读:
    对缓存的思考——提高命中率
    2009年职场上必要做的事
    开始睡觉吧睡觉让人更聪明
    人脸识别和模式识别网址
    英语面试精彩问答摘录
    Some Image Processing related Websites
    转载:研究生应该常去的网站
    人工智能和图像网站
    转载:60个必须知道的生活常识
    《c程序设计》的算法归纳
  • 原文地址:https://www.cnblogs.com/dearxinli/p/3873485.html
Copyright © 2011-2022 走看看