Alternate Style Sheets [CSS + JS]

Cant decide on a look for your webste?
Well if you have coded the whole thing in CSS then you can use this nifty little feature to let the user change layouts.

In the head section of your page, call for your default style sheet and all your alternate ones;

<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="style4" />
<script type="text/javascript" src="styles.js"></script>

Now, for your links to switch the styles, you simply add somthing like this to your page;

Default Style 2 Style 3 Style 4

The last part of this little tutorial is the javascript, it changes the style sheet and remembers which style you prefer when you go back to the page, using cookies.

Save this as styles.js;

function setActiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
 if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
 a.disabled = true;
 if(a.getAttribute("title") == title) a.disabled = false;
 }
 }
}

function getActiveStyleSheet() {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
 if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
 }
 return null;
}

function getPreferredStyleSheet() {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
 if(a.getAttribute("rel").indexOf("style") != -1
 && a.getAttribute("rel").indexOf("alt") == -1
 && a.getAttribute("title")
 ) return a.getAttribute("title");
 }
 return null;
}

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 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;
}

window.onload = function(e) {
 var cookie = readCookie("style");
 var title = cookie ? cookie : getPreferredStyleSheet();
 setActiveStyleSheet(title);
}

window.onunload = function(e) {
 var title = getActiveStyleSheet();
 createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Have fun!

Nice, but it would be helpful to have well commented code as well.