DOMTokenList.toggle()

La méthode toggle() (bascule) de l'interface DOMTokenList supprime une marque (token) donnée de la liste et renvoie false (faux). Si token n'existe pas, il est ajouté et la fonction renvoie true.

Syntaxe

tokenList.toggle(token, force);

Paramètres

token
Une DOMString (chaîne de caractères) représentant la marque que l'on veut activer.
force Facultatif
Un Boolean (booléen) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie false (faux), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie true (vrai), la marque sera seulement ajoutée et pas supprimée après.

Valeur retournée

Un Boolean (booléen) — false (faux) si la marque n'est pas dans la liste après l'appel ou true (vrai) si elle y est.

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. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le Node.textContent du <span>.

D'abord, le HTML :

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

Maintenant le JavaScript :

var span = document.querySelector("span");
var classes = span.classList;
span.onclick = function() {
  var result = classes.toggle("c");
  if(result) {
    span.textContent = "'c' added; classList is now '" + classes + "'.";
  } else {
    span.textContent = "'c' removed; classList is now '" + classes + "'.";
  }
}

La sortie ressemble à ceci :

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'toggle()' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
toggleChrome Support complet 1Edge Support complet 12Firefox Support complet OuiIE Support complet 11Opera Support complet OuiSafari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 5.1Samsung Internet Android Support complet Oui
force argumentChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android ? Opera Android Support complet OuiSafari iOS Support complet 6.1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue