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

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

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

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

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

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

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

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

新版本的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或更低版本)中运行。

最好的解决方案之一是检查元素是否存在，然后继续添加或删除元素，最重要的是，如果元素为空，则删除它。

/** * @description detect if obj is an element * @param {*} obj * @returns {Boolean} * @example * see below */ function isElement(obj) { if (typeof obj !== 'object') { return false } let prototypeStr, prototype do { prototype = Object.getPrototypeOf(obj) // to work in iframe prototypeStr = Object.prototype.toString.call(prototype) // '[object Document]' is used to detect document if ( prototypeStr === '[object Element]' || prototypeStr === '[object Document]' ) { return true } obj = prototype // null is the terminal of object } while (prototype !== null) return false } /* * Add multiple class * addClasses(element,['class1','class2','class3']) * el: element | document.querySelector(".mydiv"); * classes: passing:: array or string : [] | 'cl1,cl2' | 'cl1 cl2' | 'cl1|cl2' */ function addClasses(el, classes) { classes = Array.prototype.slice.call(arguments, 1); if ( isElement(el) ){ //if (document.body.contains(el) for (var i = classes.length; i--;) { classes[i] = Array.isArray(classes[i]) ? classes[i]: classes[i].trim().split(/\s*,\s*|\s+/); for (var j = classes[i].length; j--;) el.classList.add(classes[i][j]); } } } /* * Remove multiple class * Remove attribute class is empty * addClasses(element,['class1','class2','class3']) * el: element | document.querySelector(".mydiv"); * classes: passing:: array or string : [] | 'cl1,cl2' | 'cl1 cl2' | 'cl1|cl2' */ function removeClasses(el, classes) { classes = Array.prototype.slice.call(arguments, 1); if ( isElement(el) ) { for (var i = classes.length; i--;) { classes[i] = Array.isArray(classes[i]) ? classes[i]: classes[i].trim().split(/\s*,\s*|\s+/); for (var j = classes[i].length; j--;) el.classList.remove(classes[i][j]); let cl = el.className.trim(); if (!cl){ el.removeAttribute('class'); } } } } var div = document.createElement("div"); div.id = 'test'; // div.setAttribute("id", "test"); div.textContent = 'The World'; //div.className = 'class'; // possible use: afterend, beforeend document.body.insertAdjacentElement('beforeend', div); // Everything written above you can do so: //document.body.insertAdjacentHTML('beforeend', '<div id="text"></div>'); var el = document.querySelector("#test"); addClasses(el,'one,two,three,four'); removeClasses(el,'two,two,never,other'); el.innerHTML = 'I found: '+el.className; // return : I found: four three one #test { display: inline-block; border: 1px solid silver; padding: 10px; }