Método toggle do objeto classList

O método toggle do objeto classList alterna uma classe CSS especificada do elemento: adiciona a classe, se ela não estiver presente, e remove, se estiver.

Sintaxe

javascriptelemento.classList.toggle(classe);

Exemplo

Neste exemplo, ao usar o método toggle a classe zzz será removida, pois já está presente no elemento:

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

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

Resultado da execução do código:

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

Exemplo

Neste exemplo, ao usar o método toggle a classe zzz será adicionada, pois não está presente no elemento:

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

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

Resultado da execução do código:

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

Veja também