在字符串中添加由空格分隔的多个类的更好方法是使用带有split的Spread_syntax:

element.classList.add(...classesStr.split(" "));

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

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

标准定义只允许添加或删除单个类。有几个小的包装器函数可以完成您的要求:

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

这些包装器允许您将类列表指定为单独的参数、用空格或逗号分隔的字符串或组合。有关示例，请参见http://jsfiddle.net/jstoolsmith/eCqy7

下面是一个针对ie10和ie11用户的工作，看起来非常简单。

var elem = document.getElementById（'elem'）; ['first'，'second'，'three'].forEach（item => elem.classList.add（item））; <div id=“elem”>Hello World！</div>

Or

var elem = document.getElementById（'elem'）， 类 = [“第一”、“第二”、“第三”]; classes.forEach（function（item） { elem.classList.add（item）; }); <div id=“elem”>Hello World！</div>

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

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的类数组。

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

创建这个函数

函数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”)等等