Lesrooster

JS Referentiemanual

JavaScript

Window

HTML DOM

Web API

HTML Object

Andere referentiehandleidingen

Electieve cursus

Aanbevolen cursus:

CodeW3C.com Treasure Chest

HTML DOMTokenList toggle() methode

Previous page supports()
Next page value
Go back to the previous level HTML DOMTokenList

Definitie en gebruik

De toggle() methode verwijdert het opgegeven teken uit de lijst en retourneert false. Als het teken niet bestaat, wordt het toegevoegd en retourneert true.

Voorbeeld

Voorbeeld 1

Schakel de aan/uit van "myStyle":

const list = element.classList;
list.toggle("mywStyle");

Try it yourself

Voorbeeld 2

Voeg "myStyle" klasse toe aan het element:

const list = element.classList;
list.add("myStyle");

Try it yourself

Voorbeeld 3

Verwijder "myStyle" klasse van het element:

const list = element.classList;
list.remove("myStyle");

Try it yourself

Example 4

Add multiple classes to an element:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Try it yourself

Example 5

Remove multiple classes from an element:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Try it yourself

Example 6

Get the number of classes of an element:

let numb = element.classList.length;

Try it yourself

Example 7

Toggle between classes to create a dropdown button:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Try it yourself