Método HTML DOMTokenList toggle()

Definición y uso

El método toggle() elimina el marcador dado de la lista y devuelve false. Si el marcador no existe, se agrega y devuelve true.

Ejemplo

Ejemplo 1

Cambiar el estado de apertura/cierre de "myStyle":

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

Prueba por tu cuenta

Ejemplo 2

Agregar la clase "myStyle" al elemento:

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

Prueba por tu cuenta

Ejemplo 3

Eliminar la clase "myStyle" del elemento:

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

Prueba por tu cuenta

Ejemplo 4

Agregar múltiples clases a un elemento:

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

Prueba por tu cuenta

Ejemplo 5

Eliminar múltiples clases de un elemento:

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

Prueba por tu cuenta

Ejemplo 6

Obtener el número de clases del elemento:

let numb = element.classList.length;

Prueba por tu cuenta

Ejemplo 7

Cambiar entre clases para crear un botón desplegable:

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

Prueba por tu cuenta

Sintaxis

domtokenlist.toggle(token)

Parámetros

Parámetros Descripción
token Obligatorio. El marcador a cambiar.

Valor devuelto

Ninguno.

Compatibilidad del navegador

domtokenlist.toggle() es una característica del Nivel 4 de DOM (2015).

Es compatible con todos los navegadores:

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Admite Admite Admite Admite Admite

Internet Explorer 11 (o versiones anteriores) no admite domtokenlist.toggle().

Páginas relacionadas

Atributo 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