Cómo - Alternar clase
Alterne entre agregar y eliminar un nombre de clase de un elemento con JavaScript.
¡Haz clic en el botón para alternar el nombre de la clase!
Alternar clase
Paso 1) Agregar HTML:
Alterne entre agregar un nombre de clase al elemento div con id="myDIV" (en este ejemplo, usamos un botón para alternar el nombre de la clase).
Ejemplo
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Paso 2) Agregar CSS:
Agregue un nombre de clase para alternar:
Ejemplo
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Paso 3) Agregar JavaScript:
Obtenga el elemento <div> con id="myDIV" y alterne entre la clase "mystyle":
Ejemplo
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Sugerencia: consulte también Cómo agregar una clase .
Sugerencia: consulte también Cómo eliminar una clase .
Sugerencia: obtenga más información sobre la propiedad classList en nuestra referencia de JavaScript.