9/24/2014 - 1:41 AM

How to Swap CSS Files

<!DOCTYPE html>
<title>Style Switcher</title>
var styleFile = "style-switcher-css" + document.cookie.charAt(19) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="' + styleFile + '">');
<h2>Live in Style</h2>
<a href="javascript:%20document.cookie='style=';%20window.location.reload();">Style 1</a> | 
<a href="javascript:%20document.cookie='style=2';%20window.location.reload();">Style 2</a> | 
<a href="javascript:%20document.cookie='style=3';%20window.location.reload();">Style 3</a>

<p>A few points of interest:</p>

<li>The HREF links use JavaScript to set a browser cookie named "style".</li>
<li>Since we are only setting one cookie and its name is "style", we can read 
its value using "document.cookie.charAt(19)".</li>
<li>If no cookie is set, "styleFile" will evaluate to "style.css". The files 
names of the style sheets need to be "style.css", "style2.css", "style3.css", 
"style4.css", and so on.</li>

body { font-family: cursive }
h2 { color: goldenrod }
body { font-family: sans-serif }
h2 { color: seagreen }
body { font-family: serif }
h2 { color: steelblue }