UTDC Blog » jquery http://www.untrocitodecielo.com/blog Sun, 21 Jun 2009 11:29:41 +0000 en hourly 1 http://wordpress.org/?v=3.0 Cambiar css con javascript http://www.untrocitodecielo.com/blog/cambiar-css-con-javascript http://www.untrocitodecielo.com/blog/cambiar-css-con-javascript#comments Thu, 28 May 2009 20:00:03 +0000 Tijeran http://www.untrocitodecielo.com/blog/?p=102 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:

?Ver código HTML
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:

?Ver código JAVASCRIPT
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:

?Ver código HTML
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

]]> http://www.untrocitodecielo.com/blog/cambiar-css-con-javascript/feed 0