/// DESIGN-ROOT /// Diseño, usabilidad y animación web

Las hojas de estilo nos permiten cambiar la apariencia de un sitio web sin tener que programarlo y/o maquetarlo de nuevo. La web http://www.csszengarden.com/ es el mejor ejemplo para comprenderlo mejor. Vemos que dependiendo del estilo que se seleccione en la columna derecha, la web tiene una apariencia u otra. El contenido es siempre el mismo, sólo cambiamos la hoja de estilos.

En el siguiente ejemplo veremos cómo cambiar la hoja de estilos CSS de un sitio web con sólo pulsar un enlace (como en la web de ejemplo). El proceso es bastante sencillo para lo que utilizaremos javascript.

1.- Declaramos la hoja de estilos principal, añadiendole un id (identificador) para poder cambiar el valor href por medio de un javascript.

2.- Añadimos la función que intercambiará una hoja de estilo por otra, utilizando la propiedad getElementById() para identificar el objeto:

function estilo(cambio) {
document.getElementById('estilo').href=cambio;
}

3.- Añadimos la siguiente linea al enlace que cambiará la hoja de estilo principal.css por la secundaria.css

onClick="estilo('secundaria.css');

Y listo! Aplicaciones varias… Dar al usuario la opción de elegir el diseño que más le guste para presentar los contenidos de nuestro sitio web o hacer varios diseños para un mismo weblog, por ejemplo.