摘要:本篇教程介绍了JavaScript如何实现类名的添加与移除,希望阅读本篇文章以后大家有所收获,帮助大家对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;
}
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号