DOMTokenList.toggle()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La méthode toggle() (qui signifie basculer en anglais) de l'interface DOMTokenList supprime un jeton (token) donné de la liste et renvoie false. Si token n'existe pas, il est ajouté et la fonction renvoie true.

Syntaxe

tokenList.toggle(token [, force]);

Paramètres

token: Une chaîne de caractères DOMString représentant le jeton que l'on veut activer ou désactiver.
force Facultatif: Un booléen qui, s'il est inclus, transforme la bascule en opération à un seul sens. Si ce paramètre vaut false, le jeton sera seulement supprimé et aucun ajout ne suivra. S'il vaut true, le jeton sera seulement ajouté et pas supprimé.

Valeur de retour

Un booléen qui vaut true ou false selon que le jeton se trouve dans la liste après l'exécution de la fonction ou non.

Exemples

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément <span> en tant que DOMTokenList en utilisant Element.classList. Lors d'un clic sur le texte, nous remplaçons alors un jeton dans la liste et écrivons la liste dans le Node.textContent du <span>.

HTML

html

<span class="a b">classList vaut 'a b'</span>

JavaScript

let span = document.querySelector("span");
let classes = span.classList;

span.addEventListener("click", function () {
  let result = classes.toggle("c");

  if (result) {
    span.textContent = `'c' ajouté ; classList vaut désormais "${classes}".`;
  } else {
    span.textContent = `'c' retiré ; classList vaut désormais "${classes}".`;
  }
});

Résultat

Spécifications

Specification
DOM Standard # ref-for-dom-domtokenlist-toggle①

Compatibilité des navigateurs

BCD tables only load in the browser