溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
方法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實現類名的添加與移除方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
