Cambiar css con javascript
Otra de las cosas que acabo de añadir al blog es la posibilidad de cambiar el css dinámicamente usando un par de librerias javascript, además, una cookie guarda el estado para que cada vez que abras de nuevo la página se mantenga el último estilo elegido.
El código es tan sencillo como casi todo en jquery, solo tienes que añadir a la cabecera los “alternates” de los diferentes css e importar tanto jquery como el plugin de este modo:
1 2 3 | <link rel="alternate stylesheet" type="text/css" href="nuevoEstilo.css" title="nuevoEstilo" media="screen" /> <script type="text/javascript" src="/wp-includes/js/styleswitch.js"></script> <script type="text/javascript" src="/wp-includes/js/jquery.js"></script> |
El atributo “title” es lo que usará el javascript para identificar los css.
La función para cambiarlos debe de ir como siempre nada más empezar el “body” y no hace falta modificarla en absoluto, sería asi:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script> (function($) { $(document).ready(function() { $('.styleswitch').click(function() { switchStylestyle(this.getAttribute("rel")); return false; }); var c = readCookie('style'); if (c) switchStylestyle(c); }); function switchStylestyle(styleName) { $('link[@rel*=style][title]').each(function(i) { this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; }); createCookie('style', styleName, 365); } })(jQuery); </script> |
Por último, desde los archivos php o html usamos un enlace para llamar a la función:
1 | <a href="serversideSwitch.html?style=nuevoEstilo" rel="nuevoEstilo" class="styleswitch">Cambiar estilo css...</a> |
Podeis verlo en funcionamiento en el menú de arriba o en la página web del autor.
Fuente: KelvinLuck.com
Tags: cambiar, css, javascript, jquery, swift
Jueves, Mayo 28th, 2009 a las 22:00
Una genial colección de iconos transparentes estilo cristal o glass completamente gratuitas de manos de 
