Karatas, FERHAT
I would love to change the world, but they won't give me the source code!
Change Style Sheets On-The-Fly
6.07.2007 12:56:14 - Filed under : CSS
Use this script to allow visitors to change a page style sheet on-the-fly, by clicking on a link in the page. The script works by switching the active style sheets. You can use any number of style sheets, which are automatically detected by the script. Optional alerts are included. Setup is easy and straightforward.

Step 1 : Setting up the Style Sheets...

Make up your style sheets and set the link rel='s up to load them, as shown below. These belong in the <head> of the page.

What you name the style sheet files does not matter (so long as the extension is .css) since the script references them only by a number, not the file name.

We show four different style sheets used; but you can use fewer or more as needed.  The script will automatically detect the number of style sheets in use.

Note the order of the style sheets. The *last* sheet loaded is the one the browser will use initially. One trick to avoid confusion is shown below, where we load the first sheet an additional time at the end of the list.
<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
<link rel="stylesheet" href="style_3.css">
<link rel="stylesheet" href="style_4.css">
<link rel="stylesheet" href="style_5.css">
Step 2 : Setting Up the JavaScript

Insert the follwing script in the <head> of the page, usually right after the link rel='s. Set doAlerts=false; to shut off the alert boxes when changing styles.
<script language="JavaScript">
var doAlerts=true;
function changeSheets(whichSheet){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
Step 3 : Calling the JavaScript to Change Style Sheets

A simple JavaScript call to the changeSheets() function enables the desired style sheet. We've adjusted the call so you start at 1 for the first sheet, 2 for the second sheet, 3 for the third, etc., in the same order they are listed in your link rel='s above.
<a href="JavaScript:changeSheets(1)">Style One</a>
<a href="JavaScript:changeSheets(2)">Style Two</a>
<a href="JavaScript:changeSheets(3)">Style Three</a>
<a href="JavaScript:changeSheets(4)">Style Four</a>
Keywords : StyleSheet, on-the-fly changing
with 0 comments

What do you think ?
Security Code 8477
Check S. Code
Home Page