classList-objektan toggle-metodi

toggle-metodi classList-objektissa vuorottelee annetun CSS-luokan elementillä: lisää luokan, jos sitä ei ole ja poistaa, jos se on.

Syntaksi

javascriptelement.classList.contains(class);

Esimerkki

Tässä esimerkissä toggle-metodia käytettäessä luokka zzz poistetaan, koska se on jo elementissä:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Koodin suorituksen tulos:

html<p id="elem" class="www ggg"></p>

Esimerkki

Tässä esimerkissä toggle-metodia käytettäessä luokka zzz lisätään, koska sitä ei ole elementissä:

html<p id="elem" class="www ggg"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Koodin suorituksen tulos:

html<p id="elem" class="www ggg zzz"></p>

Katso myös