Activar javascript o enlaces sin script desde css para cargar hojas de estilos

kahlito · #1 (**permalink**) 28/03/2006, 11:20

Hola, estoy intentando hacer una carga de hojas de estilos alternativas pulsando en varios enlaces como en este ejemplo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Hojas alternativas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="principal.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="principal.css" type="text/css" title="estilo_hoja" />
<link rel="alternate stylesheet" href="estilo2.css" type="text/css" title="estilo2" />
<link rel="alternate stylesheet" href="estilo3.css" type="text/css" title="estilo3" />
<script type="text/javascript" src="estilos.js">
</script>
</head>
<body>
<ul class="estilos">
<li class="estilos"><a href="javascript:void(0)" onkeypress="setActiveStyleSheet('estilo_hoja');return false" onclick="setActiveStyleSheet('estilo_hoja');return false">Uno</a></li>
<li class="estilos"><a href="javascript:void(0)" onkeypress="setActiveStyleSheet('estilo2');return false" onclick="setActiveStyleSheet('estilo2');return false">Dos</a></li>
<li class="estilos"><a href="javascript:void(0)" onkeypress="setActiveStyleSheet('estilo3');return false" onclick="setActiveStyleSheet('estilo3');return false">Tres</a></li>
</ul>
</div>
</body>
</html>

La función javascript la cargo asi llamandola estilos.js

Código HTML:

<script type="text/javascript" src="estilos.js">
</script>

Esta es la función:

Código:

// JavaScript Document
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;
		}
	}
	document.cookie = 'estiloCSS=' + title; //aquí ponemos la cookie
}
//y aquí verificamos si la cookie existe 
var galleta = document.cookie;
galleta = galleta.split(';');
estiloCSS = '';
for(m=0; m<galleta.length; m++){
	if(galleta[m].split('=')[0] == 'estiloCSS'){
		estiloCSS = galleta[m].split('=')[1];
		break;
	}
}

//en caso de existir la cookie llama a la función que cambia la hoja de estilos

if(estiloCSS != ''){
	setActiveStyleSheet(estiloCSS)
}

¿Como puedo hacer para llamarla o activarla sin un script? he leido por ahí peron o estoy seguro del todo que con rel="estiloCSS" me podria funcionar pero he probado y tampoco me va, más que nada por que a la hora de ser accesible me hace esta advertencia:

Hay enlaces que se activan únicamente a través de scripts.
El contenido del atributo "href" en los enlaces debe indicar un recurso válido, es decir, una dirección (URL) a la que se pueda acceder aún cuando no se soporten los scripts.
Punto de control: Asegúrese de que las páginas pueden seguir siendo usadas cuando los scripts, applets u otros objetos de programación se desconectan o no son soportados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible.

¿Alguna recomendación sobre el tema? Gracias de antemano.

kahlito · #2 (**permalink**) 29/03/2006, 11:41

Hola de nuevo.

Por ahora parece que siguiendo un poco la recomendación de accesibilidad funciona y todos contentos.

El contenido del atributo "href" en los enlaces debe indicar un recurso válido, es decir, una dirección (URL) a la que se pueda acceder aún cuando no se soporten los scripts.

Cambiando de <a href="javascript:void(0)" a por ejemplo <a href="principal.html" ya me lo acepta

Código HTML:

<ul class="estilos">
<li class="estilos"><a href="principal.html" onkeypress="setActiveStyleSheet('estilo_hoja');return false" onclick="setActiveStyleSheet('estilo_hoja');return false">Uno</a></li>
<li class="estilos"><a href="principal.html" onkeypress="setActiveStyleSheet('estilo2');return false" onclick="setActiveStyleSheet('estilo2');return false">Dos</a></li>
<li class="estilos"><a href="principal.html" onkeypress="setActiveStyleSheet('estilo3');return false" onclick="setActiveStyleSheet('estilo3');return false">Tres</a></li>
</ul>

La verdad no estoy seguro de que sea el mejor método, pero por ahora me funciona bastante bien. Ahí lo dejo por el momento por si le sirve a alguien más

Saludosss