Javascript dom类名操作

<div class="item active"></div>

• el: dom节点
• cls： 类名

el.className

• 兼容性：所有浏览器均兼容
• 类型：字符串
• 如果有多个类名，则以空格分割（例如："item active"）

hasClass(el, cls)

let className = el.className
return className.indexOf(cls) > -1

addClass(el, cls)

if(!hasClass(el, cls)) {
    el.className += ' ' + cls;
}

removeClass(el, cls)

let className = el.className;
if(hasClass(el, cls)) {
    className = className.replace(cls, '');
}
el.className = className;

el.classList

• DOMTokenList 对象
• 与 Array 一样具有 length 属性，且索引从 0 开始，但无法使用 Array 对象的方法
• 内置 add, remove, contains 方法等，用于增删改查操作
• 兼容性：部分浏览器兼容，ie9 以下不支持
• 判断浏览器是否支持：判断 el.classList 是否有值

hasClass(el, cls)

if(el.classList) {
   return el.classList.contains();
}

addClass(el, cls)

if(el.classList) {
    el.classList.add(cls);
}

removeClass(el, cls)

if(el.classList) {
    el.classList.remove(cls);
}

兼容 el.className 和 el.classList 写法

hasClass(el, cls)

if(el.classList) {
    return el.classList.contains(cls);
} else {
    return el.className.indexOf(cls) > -1
}

addClass(el, cls)

if(el.classList) {
    return el.classList.add(cls);
} else if(!hasClass(el, cls)) {
    el.className += ' ' + cls;
}

removeClass(el, cls)

if(el.classList) {
    return el.classList.remove(cls);
} else if(hasClass(el, cls)) {
    el.className = el.className.replace(cls, '');
}

el.setAttribute('class', cls)

• 因为 class 也属于 dom 节点的属性，所以可以通过设置 dom 节点属性的方式来操作类名
• 兼容性：部分浏览器兼容
• ie：el.setAttribute('className', cls)
• cls：类名，多个类名以空格分割

element-ui

hasClass(el, cls)

/**
 * 判断指定节点是否存在指定类名
 * @param {Node} el 元素节点
 * @param {String} cls class类名
 */
function hasClass(el, cls) {
    if(!el || !cls || (cls.indexOf(' ') > -1)) return;
    if(el.classList) {
        return el.classList.contains(cls);
    } else {
        return (' ' + el.className + ' ').indexOf(cls) > -1
    }
}

addClass(el, cls)

/**
 * 对指定元素节点添加类名
 * @param {Node} el 元素节点
 * @param {String} cls class类名 多个类名以空格分割
 */
function addClass(el, cls) {
    if(!el) return;
    
    let curClass = el.className;
    let classes = (cls || '').split(' ');
    
    for(let i = 0, j = classes.length; i < j; i++){
        let className = classes[i];
        if(el.classList) {
            return el.classList.add(className);
        } else if(!hasClass(el, className)) {
            curClass += ' ' + cls;
        }
    }
    
    if(!el.classList) {
        el.className = curClass;
    }
}

removeClass(el, cls)

/**
 * 移出指定节点的指定class
 * @param {Node} el 元素节点
 * @param {String} cls class类名 多个类名以空格分割
 */
function removeClass(el, cls) {
    if(!el || !cls) return;
    
    let curClass = ' ' + el.className + ' ';
    let classes = cls.split(' ');
    
    for(let i = 0, j = classes.length; i < j; i++){
        let className = classes[i];
        if(el.classList) {
            return el.classList.remove(className);
        } else if(hasClass(el, className)) {
            curClass = curClass.replace(' ' + className + ' ', '');
        }
    }
    
    if(!el.classList) {
        // trim: 去除curClass首尾空格
        el.className = trim(curClass);
    }
}