
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);
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')