jQuery不能用或者jQuery没法及时使用的时候,有需要操作节点的className,就可以用这些代码了。
【现代浏览器】
element.classList.add(selector); element.classList.remove(selector); element.classList.toogle(selector);
【支持老浏览器的办法】
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')