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

/** * @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; }

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

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

由于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中失败?

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

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

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