js學習筆記20----addClass，removeClass函數封裝

本文轉載自查看原文 2017-03-01 16:17 1958 學習筆記/ js/ javascript

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 $(this).addClass('class').siblings('class').removeClass('class')的作用添加和移除Class，addClass/removeClass的簡單實現原生JavaScript實現hasClass、addClass、removeClass、toggleClass jQuery的屬性與樣式之增加樣式.addClass(),刪除樣式.removeClass() 開發用到的js封裝方法（20種） JS JSONP 函數封裝 js-ES6學習筆記-async函數（2） js-ES6學習筆記-async函數學習筆記：_lodash.js常用函數 js-ES6學習筆記-函數的擴展