封装addClass removeClass

Posted 2020-09-09 Booo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装addClass removeClass相关的知识，希望对你有一定的参考价值。




<script>
        window.onload = function()
        {
            var oDiv = document.getElementById(‘div1‘);
            var oDiv2 = document.getElementById(‘div2‘);

            addClass(oDiv,‘box1‘);
            removeClass(oDiv2,‘box‘);

            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(‘ ‘);
                    }
                }
                //如果原来没有class就什么都不做
            };
            function arrIndexOf(arr,v)
            {
                for(var i=0;i<arr.length;i++)
                {
                    if(arr[i] == v)
                    {
                        return i;
                    }
                }
                return -1;
            };
        };
</script>

<body>
    <div id="div1" class="box">aaaa</div>
    <div id="div2" class="box">bbb</div>
</body>

以上是关于封装addClass removeClass的主要内容，如果未能解决你的问题，请参考以下文章

追加addclass和removeclass

jQuery的addClass,removeClass和toggleClass方法

.addClass(),.removeClass(),.toggleClass()的区别

jQuery学习笔记 .addClass()/.removeClass()简单学习

javascript addClass removeClass hasClass #js