方法1：使用classname屬性；
方法2：使用classlist api；
//用於匹配類名存在與否
function
reg(name)
//hasclass addclass removeclass toogleclass
varhasclass,addclass,removeclass;
if('classlist' in
document.documentelement);
addclass = function
(obj, cname) ;
removeclass = function
(obj,cname) ;
toggleclass = function
(obj, cname) ;
}else
; addclass = function
(obj, cname)
};removeclass = function
(obj, cname) ;
toggleclass = function
(obj, cname) ;}//
true
document.body.classlist.tostring() === document.body.classname;
注意：這種方法每次只能傳乙個類名且不能級聯操作，而jquery下面的類似操作是可以操作多個類名的。
所以擴充套件一下：
//addclass
domtokenlist.prototype.addclass = function
(str) .bind(
this
));
return
this;}
//removeclass
domtokenlist.prototype.removeclass = function
(str) .bind(
this
));
return
this;}
//removeclass
domtokenlist.prototype.toggleclass = function
(str) .bind(
this
));
return
this
;}
原生JS新增類名 刪除類名
為 元素新增 class document.getelementbyid mydiv classlist.add mystyle 為 元素新增多個類 document.getelementbyid mydiv classlist.add mystyle anotherclass thirdclass...
原生js新增類名
動態新增class類名在前端開發過程中是很常見得做法，比如說在實現輪播圖的時候給當前的錨點新增乙個active類,有又或者在實現動畫的時候新增乙個終態css類。當然，有很多js庫中封裝了新增類名的方法，典型的比如jquery中的addclass 方法。但是，在實際開發中，如果頁面比較簡單，邏輯功能不...
給js新增類名 新增元素標籤
const div document.createelement div div.classname foo 初始狀態 class foo div console.log div.outerhtml 使用 classlist api 移除 新增類值 div.classlist.remove foo ...