Intercambiar la hoja de estilos CSS con jQuery

  • Por
Cómo hacer un script jQuery para cambiar la hoja de estilo que está asociada a una página, de modo que el navegador pase a utilizar otro archivo CSS para aplicar los estilos a la página.
En esta entrega del Taller de jQuery os presentamos una aplicación sencilla para cambiar la hoja de estilos que una página está leyendo. Con ello cambiará totalmente la presentación de una web para que pase a mostrar unos estilos diferentes, definidos por otro archivo CSS. Como veréis, se trata de un truco bien sencillo pero que tendrá unos resultados radicales en el navegador del usuario.

La idea que utilizamos en este script, para implementar el objetivo de enlazar con otra hoja de estilos, se basa simplemente en acceder a la etiqueta LINK y cambiar el atributo href, para colocarla la ruta de la hoja de estilo nueva que se desea aplicar a la página.

Habría seguro varias maneras de hacer este ejercicio. Una de ellas pasaría por colocar a la etiqueta LINK del enlace con la hoja de estilo un atributo id para identificarla perfectamente. Esto nos permitiría la posibilidad de tener varias hojas de estilo enlazadas y cambiar solo aquella que deseemos.

<link type="text/css" href="estilo1.css" rel="Stylesheet" id="linkestilo">

Como se puede ver, tenemos el id="linkestilo" para identificar que esta es la etiqueta LINK que vamos a modificar para alterar nuestro CSS.

Luego podríamos cambiar el atributo href con el método attr() de jQuery.

$("#linkestilo").attr("href", "estilo2.css")

Con esto conseguiríamos que el LINK con la hoja de estilo pasase de ser una referencia al CSS "estilo1.css", a ser una referencia al archivo "estilo2.css". Es así de simple!!

Podemos ver este ejemplo en marcha.

Crear un grupo de enlaces para intercambiar la hoja de estilo

Bueno, la técnica explicada es tan sencilla que merece la pena buscar alguna aplicación. Lo que vamos a hacer ahora es crear un grupo de enlaces a archivos CSS que cambiarán la hoja de estilos actual por aquella que está en el href de cada enlace.

Continuaremos con un LINK a un CSS en el que hemos puesto un identificador.

<link type="text/css" href="estilo1.css" rel="Stylesheet" id="linkestilo">

Ahora tendremos varios enlaces, a los que aplicamos una misma clase CSS. Esa clase nos sirve para referirnos a todos a la vez mediante jQuery. Los enlaces podrían ser como estos:

<a href="estilo2.css" class="enlaceestilo">Cambia el estilo!</a>
<br>
<a href="estilo3.css" class="enlaceestilo">Cambia a otro estilo!</a>
<br>
<a href="estilo1.css" class="enlaceestilo">Volver al estilo original</a>

Luego, podemos definir un evento click sobre todos esos enlaces:

$(".enlaceestilo").click(function(e){
   e.preventDefault();
   var rutaEstilo = $(this).attr("href")
   $("#linkestilo").attr("href", rutaEstilo)
})

El e.preventDefault() es para decirle al evento click que no se realice el comportamiento predeterminado de este enlace, es decir, que el navegador no se vaya a la ruta marcada en el href del enlace.

Luego guardamos en una variable rutaEstilo el valor que el enlace tiene en el atributo href.

Por último accedemos a la etiqueta LINK por su identificador y cambiamos su href para colocar aquello que habíamos recuperado en la variable rutaEstilo.

Eso es todo! podemos ver el ejemplo en marcha.

Como habéis visto, ha sido un sencillo taller de jQuery, pero que espero haya resultado interesante para las personas que están empezando con este framework.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Miriam

04/5/2012
ALTAMENTE RECOMENDABLE!!
Excepcional tutorial básico, sobre la implementación de UI JQuery. Sólo he echado en falta, la consecución de tutoriales con mayor dificicultad en la implementación de este Framwork.

christian

24/9/2014
EXCELENTE
muy bueno, me gusta bastante tus manuales sigue así.

laura

03/12/2014
intercambio css
buenas, quiero crear un botón para el cambio de estilo pero claro, que al hacer click de nuevo vuelva al estilo anterior, y en un solo item de lista o enlace, un solo botón vamos. No sé como hacerlo¿? si pudieras resolverme esta duda? Muchas gracias!

Gema

28/3/2015
Gracias!
Muchas gracias por el tutorial, he incluído los efectos en mi página web y van de cine.
Os hago un enlace a este tutorial desde mi página (palaciodeverano.tk, pestaña "Diseño"), espero que no os importe, y si es así, lo modificaría o suprimiría.
Gracias de nuevo!

omar olvera

29/9/2016
Wsta re weno
Me gusto mucho, aca por mi ranchu no hay escuelas de esto y asi aprendu :D