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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <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" onclick="cambiar_fondo_con_class(id)"></div><div id="2" class ="fondo2" onclick="cambiar_fondo_con_class(id)"></div><div id="3" class ="fondo3" onclick="cambiar_fondo_con_class(id)"></div></body></html> |
>>> 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.
No hay comentarios:
Publicar un comentario