基于JavaScript實現(xiàn)類名的添加與移除
更新時間：2017年04月23日 11:52:06 作者：change_Y
本文給大家分享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)類名的添加與移除方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
水仙花數(shù)是指一個 n 位數(shù) ( n≥3 )，它的每個位上的數(shù)字的 n 次冪之和等于它本身。下面通過本文給大家分享JS判斷一個數(shù)是否是水仙花數(shù)，需要的朋友參考下吧2017-06-06
主要是測試了數(shù)組 push()方法與直接相加這兩種在JS引擎上性能的實際處理情況。程序代碼簡單明了，沒什么好解釋的。2009-12-12
這篇文章主要介紹了微信小程序修改數(shù)組長度的問題的解決,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
微信小程序實現(xiàn)動態(tài)改變view標簽寬度和高度的方法【附demo源碼下載】
這篇文章主要介紹了微信小程序實現(xiàn)動態(tài)改變view標簽寬度和高度的方法,涉及微信小程序事件響應及使用setData針對data數(shù)據(jù)動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
Javascript訪問樣式表--又一篇好文章2009-08-08
將時間轉換成時間搓的方法有很多，在本文為大家介紹下使用js將當前時間轉換成時間搓 例如2013-09-11 12:12:12，感興趣的朋友可以參考下2013-09-09
微信小程序picker多列選擇器(mode = multiSelector)
本文主要介紹了微信小程序picker多列選擇器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
uniapp與webview之間的相互傳值的實現(xiàn)
這篇文章主要介紹了uniapp與webview之間的相互傳值的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
JavaScript中立即執(zhí)行函數(shù)實例詳解
javascript和其他編程語言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時霧里看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關于JavaScript中立即執(zhí)行函數(shù)的相關資料，需要的朋友可以參考下。2017-11-11
這篇文章主要介紹了javascript面向對象特性代碼實例,包括類、靜態(tài)成員、對象、重載,需要的朋友可以參考下2014-06-06