Cambiar estilo visual (CSS) de una web con un click.

13/10/2004 - 05:50 por Scour | Informe spam

Muy buenas, últimamente he visto algunas web que ofrecen una serie de
diferentes estilos CSS y el usuario haciendo click vé como el estilo de la
web cambia completamente. Esos clicks lo que hacen es una llamada a otra
hoja de estilos externa diferente, por ejemplo el portal prefabricado
http://www.mambohispano.org/ tiene un modulo para hacer tal cosa. Mi
pregunta es si eso se puede hacer sin usar lenguajes del lado del servidor
como php o asp. Imagino que tendrá que hacerse necesariamente a través de
una función, pero ¿se podría hacer por ejemplo en JavaScript o VBScript?

Lo que no se me ocurre es como hacer sin un lenguaje del lado del servidor
para cambiar la línea de código que carga la hoja de estilos, me refiero a
esta:

<link href="archivo.css" rel="stylesheet" type="text/css" /> (la barra final
es la de xhtml)

por que supongo que por narices habrá que cambiar esa línea para hacer tal
cosa...

Otra hipotesis que se me ocurre es declarar los estilos con Identificadores

#nombre{propiedad:valor;propiedad2:valor2;...;propiedadN:valorN}

para poder manejarlos con JavaScript, pero como los identificadores no se
pueden repetir esto supondría declarar una cantidad de estilos tremenda...

¿Se os ocurre alguna forma de hacerlo sin lenguajes del lado del servidor o
es sencillamente imposible?

Saludos y gracias.

Siga el debate

4 respuestas

Tengo una respuesta

Preguntas similare

Cambiar Virtual Directory en una Web publishing rule

Leer las respuestas

#1 rameltete

14/10/2004 - 08:52 | Informe spam

Hola:

Con javascript quedaria así:

//HEAD
//Puedes combinarlas para activar y desactivar al mismo tiempo.
<script>

// Desactivar una hoja CSS
function dissableCSS (styleID) {
eval ("document.styleSheets." + styleID + ".disabled=true")
}

// Activar una hoja CSS
function enableCSS (styleID) {
eval ("document.styleSheets." + styleID + ".disabled=false")
}
</script>

// Atencion al id de la vinculacion a la hoja de estilo
<link href="general.css" rel="stylesheet" type="text/css" id="general">

Un saludo,
Rafael ;-)

Responder a este mensaje

#2 Fco. Moreno

14/10/2004 - 11:06 | Informe spam

Voy a complementar a Rafael (por cierto, saludos, compañero) explicando como
allternar hojas de estilo en un documento html

Imaginemos tres hojas de estilos, en diferentes ficheros, veanse hoja01.css,
hoja02.css y hoja03.css
En cada una de ellas definimos las mismas clases pero con distintos
atributos, por ejemplo, imaginemos una clase ".texto", que podemos aplicar
al grueso de nuestra página web, es decir, en la hoja01.css

.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
text-decoration: none;
}

En la hoja de estilos hoja02.css:

.texto {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #0000FF;
text-decoration: none;
}

Y en la hoja de estilos hoja03.css

.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #FF0000;
text-decoration: none;
}

Nuestra página debe tener linkadas las tres hojas de estilo entre las
etiquetas <head></head> pero con una sutil diferencia:

<link href="hoja01.css" rel="stylesheet" type="text/css" title="hoja1">
<link href="hoja02.css" rel="alternate stylesheet" type="text/css"
title="hoja2">
<link href="hoja03.css" rel="alternate stylesheet" type="text/css"
title="hoja3">

Esta diferencia estriba en el atributo rel, que establece la hoja de estilos
activa, y las hojas de estilo alternativas. Para hacer una hoja de estilos
esté activa, el atributo rel se fija a "stylesheet" y a la hoja de estilos
se le asigna un nombre con el atributo title, mientras que a las hojas de
estilo alternativas, en el atributo rel, se le fija "alternate stylesheet".

Vale, hasta aquí todo sencillito. Ahora necesitaremos de un script que
establezca como activas las diferentes hojas de estilo. Para no alargar
mucho el tema, pongo la función que nos va a realizar esta cuestión:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

De esta manera, desde tres enlaces que pueden ser texto o imágenes,
incluidas en el cuerpo principal de nuestra web, podemos referenciar a las
tres diferentes hojas de estilo llamándolas por su nombre (title); de esta
forma:

<a href="#" onclick="setActiveStyleSheet('hoja1'); return false;">hoja01</a>
<a href="#" onclick="setActiveStyleSheet('hoja2'); return false;">hoja02</a>
<a href="#" onclick="setActiveStyleSheet('hoja3'); return false;">hoja03</a>

Y conseguido.

En esta página http://www.alistapart.com/articles/alternate/ podeis leer un
artículo sobre esto, y muchas más cosas, como agregar cookies, y descargar
un fichero .js con todas estas funciones listas para usar.

salu2

Responder a este mensaje

#3 Scour

15/10/2004 - 00:45 | Informe spam

Pues muchisimas gracias a los 2, es justo lo que estaba buscando : )

Saludos.

"Fco. Moreno" escribió en el mensaje
news:%

Voy a complementar a Rafael (por cierto, saludos, compañero) explicando

como

allternar hojas de estilo en un documento html

Imaginemos tres hojas de estilos, en diferentes ficheros, veanse

hoja01.css,

hoja02.css y hoja03.css
En cada una de ellas definimos las mismas clases pero con distintos
atributos, por ejemplo, imaginemos una clase ".texto", que podemos aplicar
al grueso de nuestra página web, es decir, en la hoja01.css

.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
text-decoration: none;
}

En la hoja de estilos hoja02.css:

.texto {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #0000FF;
text-decoration: none;
}

Y en la hoja de estilos hoja03.css

.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #FF0000;
text-decoration: none;
}

Nuestra página debe tener linkadas las tres hojas de estilo entre las
etiquetas <head></head> pero con una sutil diferencia:

<link href="hoja01.css" rel="stylesheet" type="text/css" title="hoja1">
<link href="hoja02.css" rel="alternate stylesheet" type="text/css"
title="hoja2">
<link href="hoja03.css" rel="alternate stylesheet" type="text/css"
title="hoja3">

Esta diferencia estriba en el atributo rel, que establece la hoja de

estilos

activa, y las hojas de estilo alternativas. Para hacer una hoja de estilos
esté activa, el atributo rel se fija a "stylesheet" y a la hoja de estilos
se le asigna un nombre con el atributo title, mientras que a las hojas de
estilo alternativas, en el atributo rel, se le fija "alternate

stylesheet".

Vale, hasta aquí todo sencillito. Ahora necesitaremos de un script que
establezca como activas las diferentes hojas de estilo. Para no alargar
mucho el tema, pongo la función que nos va a realizar esta cuestión:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

De esta manera, desde tres enlaces que pueden ser texto o imágenes,
incluidas en el cuerpo principal de nuestra web, podemos referenciar a las
tres diferentes hojas de estilo llamándolas por su nombre (title); de esta
forma:

<a href="#" onclick="setActiveStyleSheet('hoja1'); return

false;">hoja01</a>

<a href="#" onclick="setActiveStyleSheet('hoja2'); return

false;">hoja02</a>

<a href="#" onclick="setActiveStyleSheet('hoja3'); return

false;">hoja03</a>

Y conseguido.

En esta página http://www.alistapart.com/articles/alternate/ podeis leer

artículo sobre esto, y muchas más cosas, como agregar cookies, y descargar
un fichero .js con todas estas funciones listas para usar.

salu2

Responder a este mensaje

#4 rameltete

17/10/2004 - 11:45 | Informe spam

Qué gusto da encontrar a gente conocida.

Un saludo,

Rafael ;-)

"Fco. Moreno" escribió en el mensaje
news:%

Voy a complementar a Rafael (por cierto, saludos, compañero) explicando

como

allternar hojas de estilo en un documento html

Imaginemos tres hojas de estilos, en diferentes ficheros, veanse

hoja01.css,

hoja02.css y hoja03.css
En cada una de ellas definimos las mismas clases pero con distintos
atributos, por ejemplo, imaginemos una clase ".texto", que podemos aplicar
al grueso de nuestra página web, es decir, en la hoja01.css

.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
text-decoration: none;
}

En la hoja de estilos hoja02.css:

.texto {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #0000FF;
text-decoration: none;
}

Y en la hoja de estilos hoja03.css

.texto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #FF0000;
text-decoration: none;
}

Nuestra página debe tener linkadas las tres hojas de estilo entre las
etiquetas <head></head> pero con una sutil diferencia:

<link href="hoja01.css" rel="stylesheet" type="text/css" title="hoja1">
<link href="hoja02.css" rel="alternate stylesheet" type="text/css"
title="hoja2">
<link href="hoja03.css" rel="alternate stylesheet" type="text/css"
title="hoja3">

Esta diferencia estriba en el atributo rel, que establece la hoja de

estilos

activa, y las hojas de estilo alternativas. Para hacer una hoja de estilos
esté activa, el atributo rel se fija a "stylesheet" y a la hoja de estilos
se le asigna un nombre con el atributo title, mientras que a las hojas de
estilo alternativas, en el atributo rel, se le fija "alternate

stylesheet".

Vale, hasta aquí todo sencillito. Ahora necesitaremos de un script que
establezca como activas las diferentes hojas de estilo. Para no alargar
mucho el tema, pongo la función que nos va a realizar esta cuestión:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

De esta manera, desde tres enlaces que pueden ser texto o imágenes,
incluidas en el cuerpo principal de nuestra web, podemos referenciar a las
tres diferentes hojas de estilo llamándolas por su nombre (title); de esta
forma:

<a href="#" onclick="setActiveStyleSheet('hoja1'); return