Home

Styleswitch.js: Cambiar dinámicamente los CSS con jQuery

Gracias a la interactuación de Styleswitch.js y jQuery.js tenemos posibilidad de crear una opción AJAX para mediante un click sobre un link para cambiar de hoja de estilos (CSS) según la necesidad, sobre todo en aplicaciones web y accesibilidad visual (Colores fuertes o suaves y tipografía grande). Incluye creación de cookie para recordar y conservar el estilo seleccionado en el navegador utilizado.

Modo de uso

Entre los tags <head> </head>, situamos los archivos styleswitch.js y jquery.js y las hojas de estilos como en los siguientes ejemplos.

PLAIN TEXT
HTML:
  1. <link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
  2. <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />

PLAIN TEXT
HTML:
  1. <script src="jquery.js" type="text/javascript"></script> <script src="styleswitch.js" type="text/javascript"></script>

Ahora creamos varias hojas CSS y preparamos la llamada como en el siguiente ejemplo.

PLAIN TEXT
HTML:
  1. <a class="styleswitch" rel="styles1" href="serversideSwitch.html?style=style1">styles1</a>
  2. <a class="styleswitch" rel="styles2" href="serversideSwitch.html?style=style2">styles2</a>
  3. <a class="styleswitch" rel="styles3" href="serversideSwitch.html?style=style3">styles3</a>

Ver Demo del Styleswitch
Descargar styleswitch.js, jquery.js

Quizas te pueda interesar

Deja tu comentario...

Anterior y proxima

« 7 consejos de como usar CSS para mejorar el SEO
Vagon de iconos: Carga de Doce Mil! »