PicaTeclas » css http://picateclas.net Tue, 27 Jul 2010 10:30:15 +0000 en hourly 1 http://wordpress.org/?v=3.0 Cambiar la Hoja de Estilos (CSS) mediante JavaScript http://picateclas.net/posts/cambiar-la-hoja-de-estilos-css-mediante-javascript/ http://picateclas.net/posts/cambiar-la-hoja-de-estilos-css-mediante-javascript/#comments Wed, 08 Oct 2008 12:24:22 +0000 zetxek http://picateclas.net/?p=8 Uno de los objetivos del blog es la publicación de aquellos fragmentos de código que sean útiles en el día a día, y eso es precisamente con lo que lo voy a inaugurar. Con la siguiente función javascript se puede cambiar la hoja de estilos de la página web (el CSS) a cualquiera de las incluídas en la página.

La función en cuestión es la siguiente:

?Ver código HTML
function cambiarHojaDeEstilos(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;
		            }
	            }

Para usarla, basta tener varias hojas de estilos cargadas en la página...

?Ver código HTML
<link title="hoja1" href="ejemplo1.css" rel="stylesheet" type="text/css">
<link title="hoja2" href="ejemplo2.css" rel="stylesheet" type="text/css">
<link title="hoja3" href="ejemplo3.css" rel="stylesheet" type="text/css">

... e invocar a la función. Por ejemplo, para cambiar al hacer click en un enlace:

?Ver código HTML
<a href="#" onclick="cambiarHojaDeEstilos('hoja1');">Cambia el CSS</a>

A continuación podéis descargar un pequeño ejemplo con una demostración simple: Cambiar Hoja de Estilos con JS

Vía | A List Apart.

]]> http://picateclas.net/posts/cambiar-la-hoja-de-estilos-css-mediante-javascript/feed/ 1