Easy Style Sheet Switcher

Submitted by:Pitter Alderson

Date added:14 July, 2014

Category:JavaScript

A few points of interest:

* The HREF links use JavaScript to set a browser cookie named "style".

* Since we are only setting one cookie and it's name is "style", we can read its value using "document.cookie.charAt(6)".

* 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.

Tags: style sheet , style switcher

Code Snippet:

<html><head><title>Style Switcher</title>
<script>
VAR StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">');
</script>
</head><body><h2>Easy Style Sheet Switcher</h2><br>
<a href="javascript: document.cookie='style='; window.location.reload();">Style 1</a> |
<a href="javascript: document.cookie='style=2'; window.location.reload();">Style 2</a> |
<a href="javascript: document.cookie='style=3'; window.location.reload();">Style 3</a>
</body></html>
 
 

Comments