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

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

下面是一个针对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>

新版本的DOMTokenList规范允许使用多个参数add()和remove()，以及第二个参数toggle()来强制状态。

在撰写本文时，Chrome支持添加()和删除()的多个参数，但其他浏览器都不支持。IE 10及以下、Firefox 23及以下、Chrome 23及以下及其他浏览器不支持toggle()的第二个参数。

我写了下面的小填充物来帮助我度过难关，直到支持扩展:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

我们期望使用兼容ES5和DOMTokenList的现代浏览器，但我在几个特定的目标环境中使用了这个polyfill，所以它对我来说效果很好，但它可能需要调整脚本，以便在遗留的浏览器环境(如IE 8或更低版本)中运行。

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

是相等的

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

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

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

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