Czy istnieje sposób dodawania / usuwania kilku klas w jednej instrukcji za pomocą classList?

Do tej pory muszę to zrobić:

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

Chociaż jest to wykonalne w jQuery, w ten sposób

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

Chciałbym wiedzieć, czy istnieje jakiś natywny sposób dodawania lub usuwania.

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

jest równy

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

Nowy operator spreadu jeszcze bardziej ułatwia stosowanie wielu klas CSS jako tablicy:

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

classListWłaściwość zapewnia, że zduplikowane klasy nie są niepotrzebnie dodany do elementu. Aby zachować tę funkcjonalność, jeśli nie lubisz wersji odręcznych lub wersji jQuery, proponuję dodać addManyfunkcję i removeManydo DOMTokenList(rodzaj 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]);
    }
}

Te byłyby użyteczne w następujący sposób:

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

Aktualizacja

Zgodnie z Twoimi komentarzami, jeśli chcesz napisać niestandardową metodę tylko na wypadek, gdyby nie zostały zdefiniowane, spróbuj wykonać następujące czynności:

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

Ponieważ add()metoda z classListjust pozwala na przekazywanie oddzielnych argumentów, a nie pojedynczej tablicy, musisz wywołać funkcję add()apply. Jako pierwszy argument musisz przekazać classListreferencję z tego samego węzła DOM, a jako drugi argument tablicę klas, które chcesz dodać:

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

Aby dodać klasę do elementu

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

AKTUALIZACJA:

Usuń zajęcia

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

Nowsze wersje specyfikacji DOMTokenList pozwalają na użycie wielu argumentów do add()i remove(), a także drugiego argumentu toggle()do wymuszenia stanu.

W chwili pisania tego tekstu Chrome obsługuje wiele argumentów do add()i remove(), ale żadna z innych przeglądarek nie obsługuje. IE 10 i starsze, Firefox 23 i starsze, Chrome 23 i starsze oraz inne przeglądarki nie obsługują drugiego argumentu do toggle().

Napisałem następujący mały polyfill, aby poprowadzić mnie do momentu rozszerzenia wsparcia:

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

Nowoczesna przeglądarka zgodna z ES5 i DOMTokenListoczekiwana, ale używam tego polyfill w kilku specjalnie ukierunkowanych środowiskach, więc działa świetnie, ale może wymagać poprawek dla skryptów, które będą działać w starszych środowiskach przeglądarek, takich jak IE 8 i starsze .

Możesz zrobić jak poniżej

Dodaj

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

Usunąć

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

Odniesienie

TLDR;

W prostym przypadku powyższe usuwanie powinno działać. Ale w przypadku usunięcia należy upewnić się, że klasa istnieje, zanim je usuniesz

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

Oto obejście dla użytkowników IE 10 i 11, które wydawało się dość proste.

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

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

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

Lub

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

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

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

Standardowa definicja pozwala tylko na dodanie lub usunięcie jednej klasy. Kilka małych funkcji opakowania może zrobić to, o co prosisz:

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

Te opakowania pozwalają określić listę klas jako oddzielne argumenty, ciągi znaków z elementami oddzielonymi spacjami lub przecinkami lub ich kombinację. Na przykład patrz http://jsfiddle.net/jstoolsmith/eCqy7

Bardzo proste, nie wyszukane, ale działające rozwiązanie, w które musiałbym wierzyć, jest bardzo cross-browser:

Utwórz tę funkcję

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

Nazwij to tak: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

... gdzie arrayToRemove jest tablicą nazw klas do usunięcia: ['myClass1', 'myClass2'] etcetera

... a arrayToAdd to tablica nazw klas do dodania: [„myClass3”, „myClass4”] itd.

Załóżmy, że masz tablicę klas do dodania, możesz użyć składni rozszerzania ES6:

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

Podobała mi się odpowiedź @ rich.kelly, ale chciałem użyć tej samej nomenklatury co classList.add()(ciągi oddzielone przecinkami), więc niewielkie odchylenie.

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

Możesz więc użyć:

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

Muszę przetestować wszystkie przeglądarki, ale to zadziałało w przypadku Chrome.
Czy powinniśmy szukać czegoś bardziej konkretnego niż istnienie DOMTokenList.prototype.addMany? Co dokładnie powoduje classList.add()niepowodzenie w IE11?

Kolejny polifill dla element.classListjest tutaj . Znalazłem to przez MDN .

Dołączam ten skrypt i używam element.classList.add("first","second","third")go zgodnie z przeznaczeniem.