js-addClass,removeClass

addClass

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                addClass(oDiv,'box1');
                function addClass(obj,className){
                    //如果原来没有class
                    if(obj.className == ''){
                        obj.className = className;
                    }else{
                        //如果原来有class
                        var arrClassName = obj.className.split('');
                        var _index = arrIndexOf(arrClassName,className);
                        if(_index == -1){
                            //如果要添加的class在原来的class中不存在
                            obj.className += ' '+ className;
                        }
                            //如果要添加的class在原来的class中存在
                    }
                }
                function arrIndexOf(arr,v){
                    for(var i=0;i<arr.length;i++){
                        if(arr[i] == v){
                            return i;
                        }
                    }
                    return -1;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1" class="box">div</div>
    </body>
</html>

removeClass

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                var oDiv2 = document.getElementById('div2');
                removeClass(oDiv2,'box');
                addClass(oDiv,'box1');
                function addClass(obj,className){
                    //如果原来没有class
                    if(obj.className == ''){
                        obj.className = className;
                    }else{
                        //如果原来有class
                        var arrClassName = obj.className.split('');
                        var _index = arrIndexOf(arrClassName,className);
                        if(_index == -1){
                            //如果要添加的class在原来的class中不存在
                            obj.className += ' '+ className;
                        }
                            //如果要添加的class在原来的class中存在
                    }
                }
                function removeClass(obj,className){
                    //如果原来有class
                    if(obj.className != ''){
                        var arrClassName = obj.className.split(' ');
                        var _index = arrIndexOf(arrClassName,className);
                        //如果有我们要移除的class
                        if(_index != -1){
                            arrClassName.splice(_index,1);
                            obj.className = arrClassName.join(' ');
                        }
                    }
                    
                }
                function arrIndexOf(arr,v){
                    for(var i=0;i<arr.length;i++){
                        if(arr[i] == v){
                            return i;
                        }
                    }
                    return -1;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1" class="box">div</div>
        <div id="div2" class="box box1">div2</div>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_35187942/article/details/85880592