Stylesheet switcher using jQuery

This is a simple example of stylesheet switcher

HTML

  <h1>Stylesheet switcher using jQuery</h1>
   <h3>Currently active stylesheet: Green</h3>
  <p><strong>Choose a different stylesheet:</strong></p>

  <ul>
  <li style="font-size:16px; font-weight:bold;"><a href="serversideSwitch.html?style=green" rel="green" class="styleswitch">Green</a></li>
  <li style="font-size:16px; font-weight:bold;"><a href="serversideSwitch.html?style=yellow" rel="yellow" class="styleswitch">Yellow</a></li>
  <li style="font-size:16px; font-weight:bold;"><a href="serversideSwitch.html?style=olive" rel="olive" class="styleswitch">Olive</a></li> 
  </ul>

Green.css

body, html {

    height: 100%;

    margin: 0;

    font-family : Arial, Helvetica, sans-serif;

    background:url(green.png) repeat #607459;

    color: #333; font-size: 76%; padding: 20px; }
  a { color: #607459; outline: none !important; text-decoration:underline; }

    a:hover { color: #333; text-decoration: none; text-decoration:none; }
 

Yellow.css

body, html {

    height: 100%;

    margin: 0;

    font-family : Arial, Helvetica, sans-serif;

    background:url(yellow.png) repeat #D0A728;

    color: #333; font-size: 76%; padding: 20px; }
  a { color: #D0A728; outline: none !important; text-decoration:underline; }

    a:hover { color: #333; text-decoration: none; text-decoration:none; }
 

Olive.css

body, html {

    height: 100%;

    margin: 0;

    font-family : Arial, Helvetica, sans-serif;

    background:url(olive.png) repeat #A7AB76;

    color: #333; font-size: 76%; padding: 20px; }
  a { color: #A7AB76; outline: none !important; text-decoration:underline; }

    a:hover { color: #333; text-decoration: none; text-decoration:none; }
 

Javascript

(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);

    // cookie functions http://www.quirksmode.org/js/cookies.html

    function createCookie(name,value,days)

    {

    if (days)

    {

    var date = new Date();

    date.setTime(date.getTime()+(days*24*60*60*1000));

    var expires = "; expires="+date.toGMTString();

    }

    else var expires = "";

    document.cookie = name+"="+value+expires+"; path=/";

    }

    function readCookie(name)

    {

    var nameEQ = name + "=";

    var ca = document.cookie.split(';');

    for(var i=0;i < ca.length;i++)

    {

    var c = ca[i];

    while (c.charAt(0)==' ') c = c.substring(1,c.length);

    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

    }

    return null;

    }

    function eraseCookie(name)

    {

    createCookie(name,"",-1);

    }
  

View Example

Source: kelvinluck.com