Ejemplos CSS

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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,00 de 5)
Cargando...

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…

9 respuestas

  1. 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

  2. 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 :)

  3. 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.

    1. 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!

        1. Alex no hablábamos del código dentro del body, sino de la cabecera HTML (donde van los scripts, css, etc.), que por error se había escrito como header, lo correcto es head.

          De lo que tú hablas es de crear cabeceras con la etiqueta header, pero eso es dentro del body, para el propio contenido de la página.

          Saludos.

  4. Muy bueno tu articulo.

    Pero quería saber si puedes hacer unos que cambie automáticamente. Osea, por ejemplo que cada 10 segundos cambie el color sin hacer un click.

Deja una respuesta