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!!

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!

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.