js实现addClass,removeClass

来源:互联网 发布:逆袭网络剧全集无删减 编辑:程序博客网 时间:2024/06/07 12:10
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        window.onload = function(){            var oDiv = document.getElementById("box");            addClass(oDiv, "box1");            removeClass(oDiv, "box1");            function addClass(obj, className){                if(obj.className == ''){    //判断元素是否存在className                    obj.className = className;   //如果元素不存在className 直接赋值添加即可                }                else{                    /*如果元素存在className 则有两种情况:                        1:存在想要添加的className                        2:不存在想要添加的className                    */                    var arrClass = obj.className.split(' '); //将所有className 放在数组中                    if(isElement(arrClass, className) == -1){  //如果不存在想要添加的className 直接累加;                        obj.className += " " + className;                    }                    //如果存在就什么都不用做                }            }            function removeClass(obj, className){                if(obj.className != ''){   //判断className是否存在;                    var arrClass = obj.className.split(' ');    //如果存在,同样存入数组                    var _index = isElement(arrClass, className);  //判断你要删除的className是否存在,并取到返回值                    //alert(_index+arrClass)                    if( _index != -1){                        arrClass.splice(_index,1);  //从数组中去掉重复的className                        obj.className = arrClass.join(' ');   //把剩下的className 重新赋值                    }                }            }            function isElement(arr, v){                for(var i = 0; i < arr.length; i++){                    if(arr[i] == v)                        return i;                }                return -1;            }        }    </script></head><body>    <div class="box box1" id="box">div</div></body></html>
0 0
原创粉丝点击