Cómo - Agregar una clase
Aprenda a agregar un nombre de clase a un elemento con JavaScript.
¡Haz clic en el botón para agregarme una clase!
Agregar clase
Paso 1) Agregar HTML:
Agregue un nombre de clase al elemento div con id="myDIV" (en este ejemplo, usamos un botón para agregar la clase).
Ejemplo
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Paso 2) Agregar CSS:
Dale estilo al nombre de clase especificado:
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 agréguele la clase "mystyle":
Ejemplo
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Sugerencia: consulte también Cómo alternar 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.
Sugerencia: obtenga más información sobre la propiedad className en nuestra referencia de JavaScript.