基于JavaScript實現(xiàn)類名的添加與移除
方法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;
注意:這種方法每次只能傳一個類名且不能級聯(lián)操作,而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實現(xiàn)類名的添加與移除方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序?qū)崿F(xiàn)動態(tài)改變view標(biāo)簽寬度和高度的方法【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)改變view標(biāo)簽寬度和高度的方法,涉及微信小程序事件響應(yīng)及使用setData針對data數(shù)據(jù)動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
js將當(dāng)前時間格式轉(zhuǎn)換成時間搓(自寫)
將時間轉(zhuǎn)換成時間搓的方法有很多,在本文為大家介紹下使用js將當(dāng)前時間轉(zhuǎn)換成時間搓 例如2013-09-11 12:12:12,感興趣的朋友可以參考下2013-09-09
微信小程序picker多列選擇器(mode = multiSelector)
本文主要介紹了微信小程序picker多列選擇器,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
uniapp與webview之間的相互傳值的實現(xiàn)
這篇文章主要介紹了uniapp與webview之間的相互傳值的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JavaScript中立即執(zhí)行函數(shù)實例詳解
javascript和其他編程語言相比比較隨意,所以javascript代碼中充滿各種奇葩的寫法,有時霧里看花,當(dāng)然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關(guān)于JavaScript中立即執(zhí)行函數(shù)的相關(guān)資料,需要的朋友可以參考下。2017-11-11

