comparte el articulo 

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

Actualizado el 05/10/2013 < > 7 Cometarios

Resumen: Vemos una primera parte de este mini-manual que vamos a tener sobre cómo modificar dinamicamente los estilos CSS en nuestra página web. En esta primera parte vemos como hacerlo con 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" 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.

Continuaremos cambiando el CSS dinámicamente con PHP en el siguiente artículo…

Publicado el 17/09/2010, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia. Se pueden citar partes del artículo enlazando a lawebera.es

Autor: ISC Daniel Ernesto Navarro Herrera de OK Hosting Mexico

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

7 Cometarios

  1. asd89

    Brother muy bueno tu articulo (Y)

    Pero queria saber si puedes hacer unos que cambie automaticamente? Osea, por ejemplo que cada 10 segundos cambie el color sin hacer un click . . . automaticamente . . ¿?

    Jueves, 7 de octubre 2010

  2. Nani

    ¿Por qué utilizas la etiqueta en lugar de ?

    Lunes, 16 de diciembre 2013

  3. Nani

    Vaya, no se muestra mi comentario por haber utilizado los paréntesis angulares.

    Digo que por qué utilizas la etiqueta header en vez de head. Imagino que será por equivocación, o por autocompletado.

    Lunes, 16 de diciembre 2013

  4. Verónica

    Hola Nani,

    Efectivamente era una errata dentro del código, no es header sino head como comentabas.

    Muchas gracias por avisar, ya está corregido.

    Saludos!

    Martes, 21 de enero 2014

  5. Irwing

    Disculpa, y si quiero cambiar directamente un div(estilo, en especifico el background)? este por ejemplo tiene una clase e igual que in id, gracias no se si me explique :)

    Lunes, 10 de febrero 2014

  6. Sergi

    Amigos. Yo tengo otra forma de hacer esto. Mie ejemplo puede toma la imagen de una base de datos, o de cualquier otro lugar, y hacer que se cambie el fondo.

    Yo programo en c# y asp.net. Mi truco es utilizar el control Literal de asp, este control se puede utilizar fuera de un webForm.

    El ejemplo es, en el HEAD de lapagina poner el control:

    Luego en el codigo de la pagina, en el Load escribir el codigo para hacer que cargue la imagen.

    // escribir el CSS para cambiar la imagen de fondo en funcion de lo que haya en la BBDD
    string cssFondo = ” header { background-image: url(” +
    “[RUTA DE TU IMAGEN]” + “)} “;

    imgFondo.Text = cssFondo;

    Como observareis en el ejemplo he utilizado el nombre de CSS header, pero realmente podeis poner el CSS que estes utilizando y hacer que modifique la propiedad de ese CSS, si ya tiene un backgroun-image, lo sustituira por este, pero yo, por ejemplo, lo he utilizado haciendo que en el CSS no haya el backgroun-image y que solo lo carque aqui.

    En mi caso es el fondo de la pagina, pero deberia de funcionar con cualquier DIV y CSS que creeis.

    Un saludo, espero que os ayude y os guste este ejemplo

    Lunes, 10 de agosto 2015

  7. jhefri lopez

    puedes hacer lo mismo pero con los botones cambien ese color al darle clik

    Jueves, 13 de octubre 2016

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras