Existe-t-il un moyen d'ajouter/supprimer plusieurs classes en une seule instruction avec classList ?

Question

Jusqu'à présent, c'est ce que je dois faire :

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

Bien que cela soit possible en jQuery, comme ceci

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

J'aimerais savoir s'il existe un moyen natif d'ajouter ou de supprimer.

Answer 1

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

est égal

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

Answer 2

La nouvelle opérateur de diffusion permet d'appliquer encore plus facilement plusieurs classes CSS sous forme de tableau :

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

Answer 3

Vous pouvez procéder comme suit

Ajouter

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

// OR

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

Retirer

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

// OR

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

Référence

TLDR ;

Dans le cas simple ci-dessus, la suppression devrait fonctionner. Mais dans le cas d'une suppression, il faut s'assurer que la classe existe avant de la supprimer.

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

Answer 4

Les classList permet de s'assurer que des classes en double ne sont pas ajoutées inutilement à l'élément. Afin de conserver cette fonctionnalité, si vous n'aimez pas les versions longues ou la version jQuery, je vous suggère d'ajouter une propriété addMany et removeMany a DOMTokenList (le type de 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]);
    }
}

Ceux-ci seraient alors utilisables de la manière suivante :

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

Mise à jour

Conformément à vos commentaires, si vous souhaitez uniquement écrire une méthode personnalisée pour ces éléments au cas où ils ne seraient pas définis, essayez ce qui suit :

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

Answer 5

Depuis l'entrée en vigueur de la add() de la méthode classList permet seulement de passer des arguments séparés et non un tableau unique, vous devez invoquer add() à l'aide de l'application. Pour le premier argument, vous devez passer le paramètre classList du même nœud du DOM et comme second argument le tableau des classes que vous voulez ajouter :

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