Foros del Web » Diseño web » CSS »

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

Estas en el tema de Activar javascript o enlaces sin script desde css para cargar hojas de estilos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/03/2006, 10:20
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.816
Antigüedad: 11 años, 7 meses
Puntos: 51
Activar javascript o enlaces sin script desde css para cargar hojas de estilos

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.
  #2 (permalink)  
Antiguo 29/03/2006, 10:41
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.816
Antigüedad: 11 años, 7 meses
Puntos: 51
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:57.
SEO by vBSEO 3.3.2