Imagen destacada del artículo Cambiar estilos css usando javascript

Cambiar estilos css usando javascript

css svg javascript svg
actualizado: 31 / 01 / 2022

Modificar nuestros estilos css con javascript es una habilidad que todo buen desarrollador web debe dominar, ademas es muy sencillo de lograr. Así que sigue leyendo que al final veras un ejercicio bastante entretenido para que puedas practicar.

Usando el método .style de javascript podemos escribir nuevos estilos a una etiqueta dentro de nuestro html.

Modificar css usando .style con javascript

js
document.querySelector("button").style.background = "red";

En este caso seleccionamos el elemento con document.querySelector('button') y usando .style editamos su propiedad background y la cambiamos a red. en este caso particular no parece nada del otro mundo y la verdad esto es algo completamente inútil, entonces hagamos algo más dinámico.

Definamos una estructura HTML y CSS básica para este ejercicio.

html
<button id="buttonHorizontal">Horizontal</button>
<button id="buttonVertical">Vertical</button>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
css
.container {
max-width: 95%;
margin: 0 auto;
flex-wrap: wrap;
}
.square {
width: 50px;
height: 50px;
background: teal;
margin: 0.1em;
}

Ejercicio para cambiar y manipular los estilos css con javascript

¿Qué es lo que haremos en este ejercicio?

  • Vamos a cambiar el fondo de nuestros divs con la clase square, este background se generara aleatoriamente cada vez que hagamos click sobre estos elementos.

  • Cambiar el eje de nuestro div container dependiendo del botón en el que se haga click.

js
function aleatorieColor() {
const random1 = Math.ceil(Math.random() * 255);
const random2 = Math.ceil(Math.random() * 255);
const random3 = Math.ceil(Math.random() * 255);
return `rgb(${random1},${random2},${random3})`;
}
document.querySelector("#buttonHorizontal").addEventListener("click", () => {
document.querySelector(".container").style.display = "flex";
document.querySelector(".container").style.flexDirection = "row";
document.querySelector(".container").justifyContent = "space-around";
});
document.querySelector("#buttonVertical").addEventListener("click", () => {
document.querySelector(".container").style.display = "flex";
document.querySelector(".container").style.flexDirection = "column";
document.querySelector(".container").justifyContent = "space-around";
});
document.querySelectorAll(".square").forEach(square => {
square.addEventListener("click", e => {
e.target.style.background = aleatorieColor();
});
});
  • La función aleatorieColor genera un color aleatorio en formato rgb, usando Math.ceil(Math.random() * 255) que devuelve un numero entero entre 0 y 255 que son el rango de valores que acepta el formato rgb.

  • Seleccionamos los botones y dependiendo en cual se haga click modificaremos la orientación de container accediendo al método .style de javascript.

  • Por ultimo usando document.querySelectorAll('.square') obtenemos todos los elementos con la clase square, luego los recorremos y por cada elemento ejecutamos un evento de click y modificará el valor del background por lo que nos devuelva la función aleatorieColor.

NOTA: Esta forma de modificar css desde javascript no cambia el archivo como tal, lo que hace .style es poner los nuevos estilos dentro de la etiqueta html y por temas de especificidad estos son los que se aplican.

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css