Método HTML DOMTokenList toggle()

Definição e uso

O método toggle() remove o marcador fornecido da lista e retorna false. Se o marcador não existir, ele é adicionado e retorna true.

Exemplo

Exemplo 1

Alterne o estado de aberto/fechado da classe "myStyle":

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

Experimente você mesmo

Exemplo 2

Adicione a classe "myStyle" ao elemento:

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

Experimente você mesmo

Exemplo 3

Remova a classe "myStyle" do elemento:

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

Experimente você mesmo

Exemplo 4

Adicionar várias classes a um elemento:

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

Experimente você mesmo

Exemplo 5

Remover várias classes de um elemento:

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

Experimente você mesmo

Exemplo 6

Obter o número de classes de um elemento:

let numb = element.classList.length;

Experimente você mesmo

Exemplo 7

Alternar classes para criar um botão suspenso:

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

Experimente você mesmo

Sintaxe

domtokenlist.toggle(token)

Parâmetros

Parâmetros Descrição
token Obrigatório. O sinal a ser alternado.

Retorno

Nenhum.

Suporte do navegador

domtokenlist.toggle() é uma característica do DOM Level 4 (2015).

Ele é suportado por todos os navegadores:

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

O Internet Explorer 11 (ou versões anteriores) não suporta domtokenlist.toggle().

Páginas relacionadas

Propriedade length

Método item()

Método add()

Método remove()

Método replace()

Método forEach()

Método entries()

Método keys()

Método values()

Objeto DOMTokenList