Cambiar el estilo CSS de una web dinámicamente. Parte I – JavaScript

En numerosas ocasiones, varios desarrolladores y/o diseñadores web se han topado con la necesidad de llevar a cabo una adaptación dinámica de estilos en espacios de un sitio Web. Es común encontrar clientes y patrocinadores que deseen mostrar un conjunto estandarizado de información arraigado por distintos estilos, con el objetivo de adaptarse al medio o al momento.

Dichos estilos, generados en base a los patrones de diseño de nuestra elección, se plasmarán en el sitio en algún momento, que será determinado por alguna condición y/o variable establecida previamente, y con ello lograr obtener el dinamismo necesario para desplegar dicha información con distintos patrones de estilo.

Este dinamismo es especialmente útil para aquellos proyectos donde es preciso plasmar varios mensajes en poco espacio, o donde se desea manejar un ambiente más ad hoc a la situación del visitante de nuestro sitio.

El uso de estilos mediante CSS nos permite crear toneladas de trucos ingeniosos y adaptaciones increíbles, especialmente con la incursión de CSS3 ha ido adentrándose en terrenos anteriormente desconocidos para las hojas de estilo, pero como lenguaje en muchas circunstancias su función sigue limitándose a lo estilístico.

Su manejo de dinamismo no ha sido bien adaptado, y es por ello que en esta clase de proyectos es aún recomendable respaldarnos y utilizar un lenguaje como JavaScript, o en su defecto un lenguaje del lado servidor como PHP, que nos permita llevar a cabo el uso de variables dinámicas y condicionamiento.

Cambiar estilos CSS dinámicamente con JavaScript

Mediante JavaScript obtenemos la capacidad de crear funciones que nos regresen resultados basados en operaciones y cálculos, podemos obtener los atributos de los elementos, nos permite manejar clases predefinidas para tomar directamente datos y utilizarlos como condicionales, e incluso nos da la posibilidad de obtener información de APIs o Webservices, para que en base a los datos recibidos podamos cambiar el estilo de nuestro sitio, sin necesidad de usar bases de datos o hosting sofisticado.

Supongamos que hemos sido requeridos para desarrollar una página web o blog donde el color del fondo pueda ser elegido por el usuario. Al incorporar a JavaScript al juego del diseño, esta tarea será tan sencilla de codificar que en menos de lo que esperamos será totalmente funcional.

El primer paso es conocer la estructura que utiliza JavaScript paraa manejar el estilo CSS de todos aquellos elementos que cuentan con una id asignada, a los que llamaremos objetos. Un objeto tendrá varios atributos los cuales podemos llamar adhiriendo un punto al nombre del objeto, seguido del nombre del atributo que queremos obtener o modificar (objeto.atributo), por ejemplo si tenemos un elemento “div” cuyo “id” es “header”, al momento de escribir “header.style” estamos llamando al atributo “style” de dicho elemento.

También podemos mandar llamar con el nombre de la etiqueta del elemento, en el caso del ejemplo anterior, si escribimos “div.style” llamaremos a todos los elementos “div” que se encuentran en nuestro código, dentro de los cuales también se encuentra el “div header”.

Para modificar los atributos de estilo CSS existen dos formas básicas, la primera es recurrir al atributo “style” y la segunda modificar el atributo “class”. En lo personal me inclino más por utilizar la segunda opción pues es más fácil de manejar, controlar y estandarizar el estilo de esa manera.

Como nuestro objetivo es modificar el fondo de toda la página, entonces debemos adaptar la sintaxis para que modifique directamente el elemento “body”, para lo que podemos recurrir al elemento “document” de JavaScript.

Tomando en cuenta todos los factores, la estructura quedará conformada como alguna de las siguientes maneras, “document.body.style.backgroundColor” o “document.body.className=’nombre’”.

Ahora debemos determinar de que manera el usuario podrá elegir el color de fondo, puede ser mediante elementos de formulario como un “select box” donde elija una opción, un campo de texto donde inserte el nombre, o podemos recurrir a un elemento más visual y hacerlo mediante un menú que muestre los colores de fondo disponibles.

Si utilizamos el atributo “style” nuestro código debe quedar estructurado de la siguiente manera:

<html>
<head>
<style>
body {
background-color: #000000;
color: #FFFFFF;
padding: 20px;
font: 18px Arial, Tahoma;
}
div {
width: 50px;
height: 50px;
border: 1px solid #FFFFFF;
}
</style>
<script>
function cambiar_fondo_con_style(colorsel){
var color = document.getElementById(colorsel).style.backgroundColor;
document.body.style.backgroundColor= color;
}
</script>
</head>
<body>
<p>Da click en un recuadro para cambiar el fondo de la página</p>
<div id = "1" style = "background-color: #999;" onclick = "cambiar_fondo_con_style(id)"></div>
<div id = "2" style = "background-color: #333;" onclick = "cambiar_fondo_con_style(id)"></div>
<div id = "3" style = "background-color: #666;" onclick = "cambiar_fondo_con_style(id)"></div>
</body>
</html>

Agregamos los estilos necesarios para agregar color al cuerpo y letras de la página, así como para darle una medida estándar a los recuadros del menú donde elegiremos el color.

>>> Puedes ver el ejemplo funcionando aquí <<<

Creamos una función para el cambio dinámico de fondo, a la cual le enviaremos como parámetro el “id” de los recuadros. Dentro de esta función guardamos en una variable de nombre “color” el código que corresponde al color de ese recuadro y finalmente asignamos ese código al fondo del elemento body.

Dicha función será llamada mediante un evento “onclick” agregado en cada elemento “div”, para que al momento de dar click con el puntero del Mouse sobre algún recuadro, automáticamente tome el color de éste como fondo.

Pero si deseamos utilizar class en vez del atributo “style” lo que debemos hacer es estructurar nuestro código de la siguiente manera:

<html>
<head>
<style>
body {
background-color: #000000;
color: #FFFFFF;
padding: 20px;
font: 18px Arial, Tahoma;
}
div {
width: 50px;
height: 50px;
border: 1px solid #FFFFFF;
}
.fondo1 {
background-color: #999;
}
.fondo2 {
background-color: #333;
}
.fondo3 {
background-color: #666;
}
</style>
<script>
function cambiar_fondo_con_class(id){
document.body.className='fondo'+id;
}
</script>
</head>
<body>
<p>Da click en un recuadro para cambiar el fondo de la página</p>
<div id="1" class ="fondo1" >
>>> Puedes ver el ejemplo funcionando aquí <<<
 
De esta manera nos ahorramos utilizar el atributo dentro de cada elemento  y la función de JavaScript queda mucho más limpia.
 
Continuaremos cambiando el CSS dinámicamente con PHP en el siguiente artículo…
  
 
 modificado el 17 junio, 2018 11:32