Style Sheet Switching

To use this script is very simple, first of all you need at least 2 different style sheets. When you have your 2 different style sheets you just need to link them in your website for example like this:

<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="small.css"
title="small" />

You see we have added the title attribute on both, and the alternate stylesheet has rel="alternate stylesheet". If you have more than 2 stylesheets, just add more of the second line above, but with different titles.

Now download styleswitcher.js (right click and save) and upload to your site and link to it like this:

<script type="text/javascript" src="styleswitcher.js"></script>

The last part is to add some links so you can change between the styles. Here are the links that makes so you can switch between the example styles, "default" and "small".

<a href="#" onclick="setActiveStyleSheet('default');
return false;">Default Style</a>

<a href="#" onclick="setActiveStyleSheet('small');
return false;">Small Style</a>

You may view this working example to make sure you have it all set up properly.

Leave a comment

CAPTCHA image (Click the image to get a new one)