Script para intercambiar css

La idea es tener un script que cambie la hoja de estilos que tenga actualmente asociado el documento por otra alternativa. 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 (sin tener que recurrir a otro tipo de scripts).

Si tu navegador soporta javascript, encontrarás al pie de este documento el enlace que ejecuta el cambio de la css. Además, a continuación encontrarás un formulario para demostrar que aunque se hayan introducido datos, al cambiar la css no se pierden:

Desarrollo

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.

La función para cambiar la css:

function cambiacss(id){
  var targetElement = document.getElementById(id);
  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;