到目前为止,我必须这样做:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

这在jQuery中是可以实现的,就像这样

$(elem).addClass("first second third");

我想知道是否有任何本地的方法来添加或删除。


当前回答

一个非常简单,不花哨,但有效的解决方案,我不得不相信是非常跨浏览器的:

创建这个函数

函数removeAddClasses(班级名册,removeCollection addCollection) { for (var i=0;i< removeccollection .length;i++){ classList.remove (removeCollection[我]); } for (var i=0;i<addCollection.length;i++){ classList.add (addCollection[我]); } }

这样叫它: removeAddClasses (node.classList arrayToRemove arrayToAdd);

...其中arrayToRemove是要删除的类名数组: (“myClass1”、“myClass2”)等等

...and arrayToAdd是一个要添加的类名数组: (“myClass3”、“myClass4”)等等

其他回答

一个非常简单,不花哨,但有效的解决方案,我不得不相信是非常跨浏览器的:

创建这个函数

函数removeAddClasses(班级名册,removeCollection addCollection) { for (var i=0;i< removeccollection .length;i++){ classList.remove (removeCollection[我]); } for (var i=0;i<addCollection.length;i++){ classList.add (addCollection[我]); } }

这样叫它: removeAddClasses (node.classList arrayToRemove arrayToAdd);

...其中arrayToRemove是要删除的类名数组: (“myClass1”、“myClass2”)等等

...and arrayToAdd是一个要添加的类名数组: (“myClass3”、“myClass4”)等等

假设你有一个要添加的类数组,你可以使用ES6扩展语法:

Let classes = ['first', 'second', 'third']; elem.classList.add(…类);

classList属性确保重复的类不会不必要地添加到元素中。为了保持这个功能,如果你不喜欢手工版本或jQuery版本,我建议添加一个addMany函数和removmany到DOMTokenList (classList的类型):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

这些可以像这样使用:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

更新

根据你的评论,如果你只希望在这些事件没有定义时为它们编写一个自定义方法,请尝试以下方法:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

是相等的

elem.classList.add("first","second","third");

由于classList中的add()方法只允许传递单独的参数而不是单个数组,因此需要使用apply调用add()。对于第一个参数,你需要从相同的DOM节点传递classList引用,作为第二个参数,你想添加的类数组:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);