其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断。
classList属性的方法有:
根据红宝书的介绍,目前支持classList属性的浏览器有FireFox 3.6+和Chrome。因此为了更好的兼容性,我们可以自己手动实现这几个方法。
这里利用了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|$)" ), " " );
};
};