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.