Cambiar estilos css usando javascript

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

Copiarjs
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.

Copiarhtml
<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>

Copiarcss
.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.

Copiarjs
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.