Simple JavaScript Style-Switcher

If you want to give your users the ability to change the appearance of your website dynamically and you don’t fancy using a PHP Style Switcher, you can always use JavaScript.

Stylechanger screenshot

First off, let’s take a look at our standard html.

index.html

<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="main-content">
        </div>
        <div id="sub-content">
        </div>
        <ul class="clear">
            <li><a href="#nogo" id="style1">Narrow Site</a></li>
            <li><a href="#nogo" id="style2">Wide Site</a></li>
            <li><a href="#nogo" id="style3">Swap Content</a></li>
        </ul>
    </div>
</body>

Nothing overly exciting there, just a typical layout with a #wrapper div containing a #header div, a #main-content div, a #sub-content div and an unordered list.

You then need to create some alternative stylesheets. For the purpose of this snippet, I’ve created 3. Inside my ‘css’ folder, I have the following:
‘main.css’, ’style1.css’, ’style2.css’ and ’style3.css’.

‘main.css’ contains the entire default css for the website. The other stylesheets are very basic and only contain the style declarations that I want to be overwritten from my main stylesheet. For example, ’style1.css’ reduces the width of my #wrapper div to 500px.

style1.css

1
2
3

#wrapper {
    width:500px;
}

Once you’ve created your alternative stylesheets, you need your users to activate them by clicking on a link. This is where the JavaScript comes in. Inside the <head> tags of your web page, place the following:

JavaScript

<script type="text/javascript">
window.onload = function() {
    document.getElementById('style1').onclick = function(evt) {changeStyle(1);};
    document.getElementById('style2').onclick = function(evt) {changeStyle(2);};
    document.getElementById('style3').onclick = function(evt) {changeStyle(3);};
}
function changeStyle(stylenum) {
    var switcher = document.getElementById('switcher');
    var head = document.getElementsByTagName('head')[0];
    if (switcher) {
        head.removeChild(switcher);
    }
    var link = document.createElement('link');
    link.setAttribute('id','switcher');
    link.setAttribute('rel','stylesheet');
    link.setAttribute('href','css/style' + stylenum + '.css');
    link.setAttribute('type','text/css');
    head.appendChild(link);
}
</script>

The lines inside the ‘window.onload function() {}’ simply assign an event to each of our links. Each of our links, when clicked, will call the changeStyle() function, passing it a unique parameter. All the changeStyle() function does is create a <link> tag, give it some attributes (href,rel,type) and place it just before the </head> tag.

A few points worth mentioning:
The ‘appendChild’ method always places the new element as the last child of its parent. Therefore, our alternate stylesheet will always override any other stylesheets (the concept of CSS).
Also, by giving the new <link> tag an ‘id’ of ’switcher’, we can check, on subsequent calls to the changeStyle() function, to see if the user has already changed styles with this line:

1
2
3

if (switcher) {
    head.removeChild(switcher);
}

This removes any previously generated <link> tags before appending our new one. This prevents duplicate/multiple tags that don’t serve any purpose.

You can see an example of the code in action here.

While this all works, its limitation is that it won’t store the user’s preference when they click through to another page on your site. For that functionality, we need to take a look at using cookies. My next javascript snippet will do just that.

Category: CSS, Javascript // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan