Niquelao

Script para intercambiar css 17 de julio de 2006, por Rumoroso

La idea es tener un script que cambie la hoja de estilos que tenga actualmente asociado el documento por otra alternativa de forma dinámica.

Evidentemente se pueden pensar varias formas para conseguir tal fin. La ventaja que ofrece este sistema es que no inplica la recarga de la página para llevarlo a cabo. Con esto se consigue un efecto sensíblemente más rápido así como la posibilidad de efectuarlo sobre documentos que contengan campos de formulario sin implicar que el usuario pierda los datos introducidos.

Antes de seguir, podéis acceder a un ejemplo.

Este sencillo script se basa en la intervención de dos funciones. Una de ellas es la encargada de sustituir la actual hoja de estilos que tenga el documento asociado. La otra se encarga de generar el enlace necesario para que se ejecute la función anterior. El enlace para la ejecución del cambio se crea mediante un script en lugar de introducirlo en el código por cuestiones de accesibilidad. En el caso de que el navegador no soporte javascript, no se mostrará un enlace sin funcionalidad.

Para nuestro ejemplo hemos desarrollado una de las posibles formas de hacer el intercambio. En este caso se alternan dos hojas de estilo, pero podría hacerse que se sustituya directamente por la que queramos.

La función para cambiar la css:

function cambiacss(id){
	var targetElement = document.getElementById(id);
	//Se busca el fragmento "-print" que sabemos forma parte
	//del nombre de una de las css y se introduce esa css
	//o la alternativa en función del resultado
	if(targetElement.href.indexOf('-print') == -1) {
		targetElement.href="css/style-print-preview.css"
		return "vista normal";
 	}else{
		targetElement.href="css/style.css";
		return "vista preliminar";
	}
}

Se le pasa como parámetro la “id” del elemento link desde donde se enlaza la hoja de estilo. En función de cual sea la css que está enlazada se introduce una u otra. Además, la función devuelve el texto que aparecerá en el enlace que la ejecuta. En nuestro ejemplo se utiliza para pasar a mostrar una supuesta vista preliminar del documento actual (es necesario recordar que si esta fuese la supuesta vista de impresión, debería hacerse una css que se asocie al documento mediante un elemento link que incluya el atributo media=”print”. Echadle un vistazo al código de este documento para verlo.).

…y la función que crea el enlace:

function enlacecss(){
	var pie = document.getElementById("pie");
	parrafo = document.createElement("p");
	parrafo.innerHTML = '<a onkeypress="this.innerHTML=
	cambiacss('hojadeestilo');" onclick="this.innerHTML=
	cambiacss('hojadeestilo');">Vista Preliminar</a>';
 	pie.appendChild (parrafo);
}

Se crea un elemento “p” (párrafo) donde irá nuestro enlace. En el ejemplo se crea como parte del pie del documento. Como contenido del párrafo tendremos el enlace al que le asociamos en los eventos “onclick” y “onkeypress” la función de cambio de css. Finalmente hacemos que el script se ejecute al cargar la página:

window.onload = enlacecss;

Bueno, con esto termino, pues además de estar de vacaciones, hoy es mi aniversario de boda y no quiero ni imaginarme lo que puede pasar si mi mujer se entera de que estoy ante el ordenador…

Script para intercambiar css

Categoría: Javascript

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.

• Artículo anterior: Ocultar la declaración xml a Internet Explorer
• Artículo siguiente: Identificando tipos de enlace