本文给大家分享javascript实现类名的添加与移除功能，需要的朋友参考下吧
方法1：使用classname属性；
方法2：使用classlist api；
//用于匹配类名存在与否
function reg(name){
return new regexp('(^|\\s)'+name+'(\\s+|$)');
}
//hasclass addclass removeclass toogleclass
var hasclass,addclass,removeclass;
if('classlist' in document.documentelement){
hasclass=function(obj,cname){
return obj.classlist.contains(cname);
};
addclass=function(obj,cname){
obj.classlist.add(cname);
};
removeclass=function(obj,cname){
obj.classlist.remove(cname);
};
toggleclass=function(obj,cname){
obj.classlist.toggle(cname);
};
}else{
hasclass=function(obj,cname){
return reg(cname).test(obj.classname);
};
addclass=function(obj,cname){
if(!hasclass(obj,cname)){
obj.classname=obj.classname+' '+cname;
}
};
removeclass=function(obj,cname){
obj.classname=obj.classname.replace(reg(cname),' ');
};
toggleclass=function(obj,cname){
var toggle=hasclass(obj,cname)?removeclass:addclass;
toggle(obj,cname);
};
}
//true
document.body.classlist.tostring() === document.body.classname;
注意：这种方法每次只能传一个类名且不能级联操作，而jquery下面的类似操作是可以操作多个类名的。
所以扩展一下：
//addclass
domtokenlist.prototype.addclass=function(str){
tts.split(' ').foreach(function(c){
this.add(c);
}.bind(this));
return this;
}
//removeclass
domtokenlist.prototype.removeclass=function(str){
tts.split(' ').foreach(function(t){
this.remove(t);
}.bind(this));
return this;
}
//removeclass
domtokenlist.prototype.toggleclass=function(str){
tts.split(' ').foreach(function(t){
this.toggle(t);
}.bind(this));
return this;
}
以上就是javascript类名的添加与移除的实现代码分享的详细内容。