JS删除类名和添加类名

添加类名

element.classList.add(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");

删除类名

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

兼容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");