SELECCIONAR DISTINTOS ESTILOS

Cursando una asignatura me enseñaron algo muy util y querria compartirlo con vosotros, no va orientado a los que tienen blogger, blogger como todos sabemos tiene ciertas limitaciones y una de ellas es que no podemos alojar diferentes hojas de estilo, me imagino que debe de haber alguna alternativa que ciertamente ahora no se me ocurre.

Bueno lo que propongo es que los visitantes puedan cambiar el estilo de la pagina mediante un pequeño 'menu'. En general las buenas webs tienen definidos diferentes estilos, normalmente se crean uno de alto contraste para discapacitados visuales, otro de impresión y uno principal y alternativo. Firefox tiene la opción de seleccionar el estilo desde Ver->Estilo de pagina, el problema venia como siempre con IE que no poseia esta opción, por tanto los diseñadores tenian que crear una alternativa para que todo el mundo pudiera seleccionar los distintos estilos. Debo resaltar que en la última versión (8.0) de IE si que la incorpora pero como siempre tenemos que diseñar para todos y desgraciadamente aún hay mucha gente con versiones antiguas de IE.

Por ejemplo en nuestra web tenemos los links a las distintas hojas de estilo de la siguiente forma:

<link rel="stylesheet" type="text/css" href="Principal.css" title="Predeterminado" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="Secundario.css" media="screen"
title="Secundario" />
<link rel="stylesheet" type="text/css" href="print.css" title="Impresion" />

Tenemos 3 estilos resaltados en negrita.

Ahora definiremos un par de enlaces en los que daremos la opción de simplemente haciendo click encima cambiará el estilo de nuestra pagina:

<p><b>Elige tu estilo</b></p><br />
<a href="Javascript:estilo('Predeterminado')">Principal</a><br /><br />
<a href="Javascript:estilo('Secundario')">Secundario</a>

Llegado a este punto tan solo tendremos que insertar nuestra función Javascript que permitirá cambiar de un estilo a otro.

function estilo(titulo) {//Para cambiar el estilo.

var arrayLink = document.getElementsByTagName("link");
for(var i = 0; i < arrayLink.length; i++) {
// Sólo aquellas etiquetas link que hacen referencia a un estilo
// y que no sea para impresión
if(arrayLink[i].getAttribute("rel") != null &&
arrayLink[i].getAttribute("rel").indexOf("stylesheet") != -1 &&
arrayLink[i].getAttribute("media") != "print") {
// Si tiene título es un estilo preferido o alternativo,
// si no tiene título es un estilo
// predeterminado y siempre tiene que utilizarse
if(arrayLink[i].getAttribute("title") != null &&
arrayLink[i].getAttribute("title").length > 0) {
if(arrayLink[i].getAttribute("title") == titulo)
arrayLink[i].disabled = false;
else
arrayLink[i].disabled = true;
}}}}

A esta función lo que le entra es el nombre del estilo seleccionado y busca dentro de las etiquetas link, cuando la encuentra lo activa poniendolo a true. Cuidado con el disabled, disabled=true es que está deshabilitado!!.


Ebook