Gibt es eine Möglichkeit, mit classList mehrere Klassen in einer einzigen Anweisung hinzuzufügen / zu entfernen?

Bisher muss ich das machen:

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

Dies ist zwar in jQuery möglich, aber so

$(elem).addClass("first second third");

Ich würde gerne wissen, ob es eine native Möglichkeit zum Hinzufügen oder Entfernen gibt.

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

ist gleich

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

Der neue Spread-Operator macht es noch einfacher, mehrere CSS-Klassen als Array anzuwenden:

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

Die classListEigenschaft stellt sicher, dass dem Element nicht unnötig doppelte Klassen hinzugefügt werden. Um diese Funktionalität zu halten, wenn Sie die Langschrift Versionen oder jQuery - Version nicht mögen, würde ich vorschlagen , eine addManyAdditionsfunktion und removeManyzu DOMTokenList(die Art der classList):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

Diese wären dann wie folgt verwendbar:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

Aktualisieren

Wenn Sie gemäß Ihren Kommentaren nur dann eine benutzerdefinierte Methode für diese schreiben möchten, wenn sie nicht definiert sind, versuchen Sie Folgendes:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}

Da die add()Methode von classListjust nur die Übergabe separater Argumente und nicht eines einzelnen Arrays zulässt, müssen Sie add()mit apply aufrufen . Für das erste Argument müssen Sie die classListReferenz vom selben DOM-Knoten übergeben und als zweites Argument das Array von Klassen, die Sie hinzufügen möchten:

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

So fügen Sie einem Element eine Klasse hinzu

document.querySelector(elem).className+=' first second third';

AKTUALISIEREN:

Entfernen Sie eine Klasse

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

Neuere Versionen der DOMTokenList-Spezifikation ermöglichen mehrere Argumente für add()und remove()sowie ein zweites Argument toggle(), um den Status zu erzwingen.

Zum Zeitpunkt des Schreibens unterstützt Chrome mehrere Argumente für add()und remove(), jedoch keiner der anderen Browser. IE 10 und niedriger, Firefox 23 und niedriger, Chrome 23 und niedriger und andere Browser unterstützen das zweite Argument nicht toggle().

Ich habe die folgende kleine Polyfüllung geschrieben, um mich zu überraschen, bis sich die Unterstützung erweitert:

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

Ein moderner Browser mit ES5-Konformität DOMTokenListwird erwartet, aber ich verwende diese Polyfüllung in mehreren speziell auf sie zugeschnittenen Umgebungen. Daher funktioniert sie hervorragend für mich, muss jedoch möglicherweise für Skripts optimiert werden, die in älteren Browserumgebungen wie IE 8 und niedriger ausgeführt werden .

Hier ist eine Problemumgehung für IE 10- und 11-Benutzer, die ziemlich einfach zu sein schien.

var elem = document.getElementById('elem');

['first','second','third'].map(item => elem.classList.add(item));

<div id="elem">Hello World!</div>

Oder

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.map(function(item) {
    return elem.classList.add(item);
});

<div id="elem">Hello World!</div>

Sie können wie unten tun

Hinzufügen

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

Entfernen

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

Referenz

TLDR;

Im einfachen Fall oben sollte das Entfernen funktionieren. Im Falle einer Entfernung sollten Sie jedoch sicherstellen, dass eine Klasse vorhanden ist, bevor Sie sie entfernen

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})

Die Standarddefinition erlaubt nur das Hinzufügen oder Löschen einer einzelnen Klasse. Ein paar kleine Wrapper-Funktionen können das tun, was Sie verlangen:

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

Mit diesen Wrappern können Sie die Liste der Klassen als separate Argumente, als Zeichenfolgen mit durch Leerzeichen oder Kommas getrennten Elementen oder als Kombination angeben. Ein Beispiel finden Sie unter http://jsfiddle.net/jstoolsmith/eCqy7

Eine sehr einfache, nicht ausgefallene, aber funktionierende Lösung, von der ich glauben müsste, dass sie sehr browserübergreifend ist:

Erstellen Sie diese Funktion

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

Nennen Sie es so: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

... wobei arrayToRemove ein Array von zu entfernenden Klassennamen ist: ['myClass1', 'myClass2'] etcetera

... und arrayToAdd ist ein Array von Klassennamen, die hinzugefügt werden müssen: ['myClass3', 'myClass4'] usw.

Angenommen, Sie müssen eine Reihe von Klassen hinzufügen, dann können Sie die ES6-Spread-Syntax verwenden:

let classes = ['first', 'second', 'third']; elem.classList.add(...classes);

Ich mochte die Antwort von @ rich.kelly, aber ich wollte die gleiche Nomenklatur wie classList.add()(durch Kommas getrennte Zeichenfolgen) verwenden, also eine leichte Abweichung.

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

So können Sie dann verwenden:

document.body.classList.addMany('class-one','class-two','class-three');

Ich muss alle Browser testen, aber das hat für Chrome funktioniert.
Sollten wir nach etwas Spezifischerem suchen als nach der Existenz von DOMTokenList.prototype.addMany? Was genau verursacht classList.add()einen Fehler in IE11?

Eine weitere Polyfüllung für element.classListist hier . Ich habe es über MDN gefunden .

Ich füge dieses Skript hinzu und verwende es element.classList.add("first","second","third")wie beabsichtigt.