Manuales:
Cambiar
el estilo CSS de una web dinámicamente parte 1- JavaScript:
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.
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.
Desarrollar
una página web o blog donde el color del fondo pueda ser elegido por el
usuario.
El
primer paso es conocer la estructura que utiliza JavaScript para 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”.
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’”.
De qué 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>
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" 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>
TOMADO DE:
No hay comentarios:
Publicar un comentario