js在不刪除原有類名追加新類名方法

添加類名

element.classList.add(class1, class2, ...);

刪除類名

element.classList.remove(class1, class2, ...);

兼容IE8

 function addClass(el, className) {
        var oldClassStr = '';
        //先判斷元素中是否有class屬性
        if(ele.getAttribute('class')){
            //獲取原有的類名
            oldClassStr = el.getAttribute('class');
            //把原來的類名分割後添加入數組,判斷要添加的類名是否已存在
            var oldClassArr = oldClassStr.split(' ');
            ////如果!=-1,說明存在或同名,不添加直接return
            if(oldClassArr.indexOf(className)!=-1){
                console.log(className+"已經存在或同名");
                return;
            }else{
                //添加空格
                oldClassStr+=' ';
            }
        }
        //添加新類名
        oldClassStr += className;
        el.setAttribute('class',oldClassStr);
    }

調用--若加多個類名,用空格格開即可

addClass(el,"className1 className2");

兼容IE8

function delClass(el,className){
     //先判斷元素是否有 class 屬性
     if(!el.getAttribute('class')){
         return;
     }
     //獲取原有的類名
     var oldClassStr = el.getAttribute('class');
     //把原來的類名分割後添加入數組,判斷要添加的類名是否已存在
     var oldClassArr = oldClassStr.split(' ');
     //獲取要刪除了類名的下標
     var index = oldClassArr.indexOf(className);
     //如果!=-1,說明存在,纔可以執行刪除
     if(index!=-1){
         oldClassArr.splice(index,1);
     }
     //把刪除後的數組轉爲字符串
     oldClassStr = oldClassArr.join(' ');
     el.setAttribute('class',oldClassStr);
 }

調用--若加多個類名,用空格格開即可

delClass(el,"className1 className2");