基于JavaScript实现类名的添加与移除_JavaScript

基于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实现类名的添加与移除方法，希望对大家有所帮助