Heim > Web-Frontend > js-Tutorial > Teilen des Implementierungscodes zum Hinzufügen und Entfernen von JavaScript-Klassennamen

Teilen des Implementierungscodes zum Hinzufügen und Entfernen von JavaScript-Klassennamen

黄舟
Freigeben: 2017-04-24 09:09:43
Original
1533 Leute haben es durchsucht

本文给大家分享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;
Nach dem Login kopieren

注意:这种方法每次只能传一个类名且不能级联操作,而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;
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen des Implementierungscodes zum Hinzufügen und Entfernen von JavaScript-Klassennamen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage