JavaScript class的操作 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .d1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .d2{
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <button id="btn">操作#d01</button>
        <br /><br />
        <div id="box" class="d1 d2">
        </div>
    </body>
    <script type="text/javascript">
        var btn=document.getElementById("btn");
        var box=document.getElementById("box");
        /*
         * 通过class属性来间接的修改样式
         * 这样我们只需要修改一次，提升性能，
         */
        btn.onclick=function(){
//            box.className="d2";
//            box.className+=" d2";//在d1上增加d2样式，注意d2前面有空格
            
            //addClass(box,"d2");
            
            //removeClass(box,"d2");
            
            toggleClass(box,"d2");
            
            
        }
        
        
        /*定一个函数来用来想一个元素中动态添加指定的class属性值
         * -参数：
         *         obj 目标元素
         *         cn 要添加的class值
         */
        function addClass(obj,cn){
            //判断，防止cn有了还执行函数多次添加
            if(!hasClass(obj,cn)){
                obj.className += " "+cn;
            }
            
        }
        /*判断一个元素中是否含有指定的class属性值
         * 如果有，返回true
         */
        function hasClass(obj,cn){
            //判断obj中有没有cn class，正则表达式
            var reg=new RegExp("\\b"+cn+"\\b");
            
            return reg.test(obj.className);
        }
        /*删除一个元素中的指定class属性值
         */
        function removeClass(obj,cn){
            //创建一个正则表达式
            var reg=new RegExp("\\b"+cn+"\\b");
            //删除跟正则式符合的class
            obj.className=obj.className.replace(reg," ");
        }
        /*切换一个class
         * 如果元素中有该class，则删除；没有，则添加
         */
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn);
            }else{
                addClass(obj,cn);
            }
        }
    </script>
</html>

 

posted @ 2019-08-08 13:56  WideWang  阅读(685)  评论(0)    收藏  举报