Cambiar la Hoja de Estilos (CSS) mediante JavaScript

Miércoles, Octubre 8th, 2008 | css, fragmentos útiles, javascript

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.

Aún no hay comentarios.

Dejar un comentario

Categorías

Archivo

Enlaces

Buscar