你可以像下面这样做

Add

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

// OR

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

删除

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

// OR

elem.classList.remove(...["first","second","third"]);

参考

TLDR;

在上述直接的情况下，拆卸应该工作。但是在删除的情况下，应该在删除它们之前确保类存在

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

我发现了一个非常简单的方法，更现代和优雅的方式。

const el = document.querySelector('.m-element');

// To toggle
['class1', 'class2'].map((e) => el.classList.toggle(e));

// To add
['class1', 'class2'].map((e) => el.classList.add(e));

// To remove
['class1', 'class2'].map((e) => el.classList.remove(e));

好在你可以很容易地扩展类数组或使用任何来自API的类数组。

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

是相等的

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

向元素中添加类

document.querySelector(elem).className+=' first second third';

更新:

删除一个类

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

我喜欢@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中失败?

新的展开操作符使应用多个CSS类作为数组更加容易:

const list = ['first', 'second', 'third'];
element.classList.add(...list);