ProgramingWeb

Cambiar css con javascript

Modificar nuestros estilos css con javascript es algo 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.

Cambiar css usando .style con javascript

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.

<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>
.container{
  max-width: 95%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.square{
  width: 50px;
  height: 50px;
  background: teal;
  margin: .1em;
}

Ejercicio para manipular los estilos css con javascript

¿Qué es lo que haremos?

  • 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 el botón en el que se haga click.

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 cambiaremos 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 cambiamos el valor 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.