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

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

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

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

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


当前回答

另一个元素填充。classList在这里。我是通过MDN找到的。

我包括该脚本,并使用element.classList.add(“第一”,“第二”,“第三”),因为它的意图。

其他回答

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

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

另一个元素填充。classList在这里。我是通过MDN找到的。

我包括该脚本,并使用element.classList.add(“第一”,“第二”,“第三”),因为它的意图。

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

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

我喜欢@rich。kelly的答案,但我想使用与classList.add()(逗号分隔字符串)相同的命名法,因此稍有偏差。

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

所以你可以使用:

document.body.classList.addMany('class-one','class-two','class-three');

我需要测试所有的浏览器,但这适用于Chrome。 我们是否应该检查一些比DOMTokenList.prototype.addMany的存在更具体的东西?究竟是什么原因导致classList.add()在IE11中失败?

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

是相等的

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