Cambiar clases CSS en JavaScript
Siempre que trabajamos con elementos DOM dentro de JavaScript, hay momentos y situaciones en las que necesitamos proporcionar algunas interacciones a los elementos HTML. Por ejemplo, cambiar los colores de fondo de un elemento cuando el usuario hace clic, ocultar un elemento, modificar la apariencia de un elemento, etc. La mayoría de las veces, esto se puede hacer cambiando las clases.
El lenguaje JavaScript le proporciona diferentes formas de hacer todo esto. Veamos varios métodos mediante los cuales podemos cambiar las clases CSS de los elementos HTML.
Varias formas de cambiar la clase CSS en JavaScript
A continuación tenemos un documento HTML que consta de un único elemento div dentro de la etiqueta body. También tenemos una etiqueta style que contiene una identificación y dos clases.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#dimensions{
width: 500px;
height: 500px;
}
.bg_1{
background-color: crimson;
}
.bg_2{
background-color: teal;
}
</style>
</head>
<body>
<div id="dimensions" class="dimensions bg_1">
<script>
let myDiv = document.getElementById('dimensions');
myDiv.addEventListener("click", function(e) {
});
</script>
</body>
</html>
La identificación con el nombre dimensions contiene el ancho y el alto. bg_1 y bg_2 son dos clases que tienen la propiedad de background-color con los colores crimson y teal, respectivamente. La dimensions y bg_1 se aplican al elemento HTML dentro de la etiqueta body.
En el código, puede ver que ya hemos almacenado el elemento div dentro de la variable myDiv usando el método document.getElementById() y pasando ese ID de elementos (en este caso, dimensions) como una cadena dentro de eso.
Nuestro objetivo aquí es cambiar el color de fondo del elemento div de carmesí a verde azulado cambiando la clase bg_1 por bg_2. Esto se hará solo cuando el usuario esté en el elemento div. Para esto, también hemos agregado el evento onClick usando el método addEventListener() en la variable myDiv dentro de JavaScript.
Seguiremos varias formas de lograr esto, como se muestra a continuación. Todo el código que escribiremos a continuación irá dentro del método addEventListener() bajo la etiqueta script.
Usando el método className
La forma más sencilla de cambiar una clase CSS en JavaScript es mediante el método className. Con este método, puede reemplazar cualquier clase existente ya presente en el elemento HTML con algunas otras clases. Puede especificar todas las clases nuevas que desea agregar como una cadena con separación de espacios.
myDiv.className = 'bg_2';
Tenga en cuenta que esto reemplazará todas las clases existentes presentes en el elemento con las nuevas clases.
Uso de los métodos classList.remove y classList.add
Se puede acceder a todas las clases que están presentes en el elemento HTML con la ayuda del método classList. Usando classList.remove, puede eliminar una clase específica, y usando classList.add, puede agregar nuevas clases al elemento. En nuestro ejemplo, primero eliminaremos la clase bg_1 usando classList.remove y luego agregaremos una nueva clase, es decir, bg_2 usando classList.add como se muestra a continuación.
myDiv.classList.remove("bg_1");
myDiv.classList.add("bg_2");
Así es como cambiamos las clases de CSS usando estos métodos.
Usando el método classList.replace()
Otra forma de cambiar la clase CSS es usando el método classList.replace(). Este método toma dos argumentos, el primero es la clase existente que ya está presente en el elemento que se desea replace(en este caso bg_1), y el segundo es la nueva clase que desea agregar al elemento (En este caso bg_2).
myDiv.classList.replace('bg_1', 'bg_2');
Estos son algunos de los métodos con los que podemos cambiar las clases CSS en JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn