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

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

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

创建这个函数

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

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

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

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

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

你可以像下面这样做

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);
  }
})

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