JS实现jQuery的addClass和removeClass功能

jQuery不能用或者jQuery没法及时使用的时候，有需要操作节点的className，就可以用这些代码了。

【现代浏览器】

element.classList.add(className);
element.classList.remove(className);
element.classList.toggle(className);
element.classList.contains(className); // => $elem.has(className);
// 还有一个替换语法
element.classList.replace(oldClassName, newClass);

MDN Web API

IE浏览器不支持replace，add和remove不支持多参数语法；

更多的查看API下的浏览器支持情况；

【支持老浏览器的办法】

var addClass = function(elem, str) {
    if (elem.className == str) return
    if (elem.className.indexOf(str+' ') > -1) return
    if (elem.className.indexOf(' '+str) > -1) return  
    str = (elem.className == '')?str:' '+str
    elem.className += str
    elem.className = elem.className.replace(/\s{2,}/g, ' ')
}
    
var removeClass = function(elem, str) {
    if (elem.className == str) {
        elem.removeAttribute('class')
        return
    } else if (elem.className.indexOf(str+' ') > -1) {
        elem.className = elem.className.replace(str+' ','')
    } else if (elem.className.indexOf(' '+str) > -1) {
        elem.className = elem.className.replace(' '+str,'')
    }
    elem.className = elem.className.replace(/\s{2,}/g, ' ')
}

【使用方法】

例如：

addClass(document.querySelector('.hello-world'), 'demo')

removeClass(document.querySelector('.hello-world'), 'hello-world')