js学习笔记20----addClass，removeClass函数封装 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>addClassName , removeClassName</title>
    </head>
    <body>
        <div id="div1" class="bb">
            div1
        </div>
        <div id="div2" class="box dd bb">
            div2
        </div>
        <script type="text/javascript">
            var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            addClass(oDiv1 , 'box');
            removeClass(oDiv2,'box');
            
            function addClass(obj,className){
                //如果原来没有class
                if(obj.className == ""){
                    obj.className = className;
                }else{
                    var _index = classIndexOf(obj,className);
                    //如果原来没有这个新加的class
                    if(_index == -1){
                        obj.className += " " + className;
                    }
                }
            }
            
            function removeClass(obj,className){
                //如果以前的元素不为空
                if(obj.className != ""){
                    var arrClassName = obj.className.split(" ");
                    var _index = classIndexOf(obj,className);
                    //如果存在要删除的class
                    if(_index != -1){
                        arrClassName.splice(_index,1);
                    }
                    obj.className = arrClassName.join(" ");
                }
            }
            
            //检验是否包含有某一个class
            function classIndexOf(obj,v){
                var arrClassName = obj.className.split(" ");
                for(var i=0;i<arrClassName.length;i++){
                    if(arrClassName[i] == v){
                        return i;
                    }
                }
                return -1;
            }
        </script>
    </body>
</html>

 

posted @ 2017-03-01 16:17  前端[色色]  阅读(2249)  评论(0)    收藏  举报