其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断。
classList属性的方法有:
add(value) 添加类名,如果有则不添加
contains(value) 判断是否存在类名,返回Boolean值
remove(value) 从列表中删除类名
toggle(value) 切换类名:如果列表中存在则删除,否则添加
为了更好的兼容性,我们可以自己手动实现这几个方法。 这里利用了DOM属性 className,我们始终是在操作这个对象。
function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " " + cName; }; }; function removeClass( elements,cName ){ if( hasClass( elements,cName ) ){ elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " ); }; };
//如果存在(不存在),就删除(添加)一个样式function toggleClass(ele,cls){ if(hasClass(ele,cls)){ removeClass(ele, cls); }else{ addClass(ele, cls); } }