Dynamic Stylesheets using JavaScript

To be more precise in this example, it is practical to have (at least) two style sheets: one for the layout and one for the color of the document. In the following example, we assume that we change the “color” CSS file dynamically.

The HTML part

There are many ways to apply this technique, but here is the one I choose, that seems very practical to me: to select style sheets dynamically we should declare a style sheet that has an id attribute like the one declared below. In the following example the style sheet declaration has the id “color_css”. It also has a (default) href attribute set to the default color style sheet.

<link rel="stylesheet" type="text/css" href="style/colour_1.css" id="color_css" />

We also declare a div section that contains anchors. The div should also have an id attribute; in this case the id is “colours”. Each anchor contains a rel attribute with the value of the (relative) path of the CSS file to be selected. Each time the anchor is clicked, the CSS file that is declared in the rel attribute should be selected.

<div id="colours">
   <a rel="style/colour_1.css" href="#"><img src="style/1.png" alt="colour scheme 1" /></a>
   <a rel="style/colour_2.css" href="#"><img src="style/2.png" alt="colour scheme 2" /></a>
   <a rel="style/colour_3.css" href="#"><img src="style/3.png" alt="colour scheme 3" /></a>
</div>

The JavaScript part

The HTML part is done. Now the programmable code part is required. Here is the jQuery way:

$(document).ready(function()
{
    $("#colours a").click(function() 
    {
        $("#color_css").attr("href",$(this).attr('rel'));
        return false;
    });
});

The function call is contained inside a $(document).ready() function call, because the HTML file must be fully parsed before the call. This is a common jQuery technique.
According to the above, whenever the user clicks the anchor, the href attribute of the item with id “color_css” changes to the value of the anchor’s rel attribute.
Here is the non-jQuery way:

window.onload=function()
{
    var div=document.getElementById("colours"); 
    var anchors=div.getElementsByTagName("a"); 
    var css=document.getElementById("color_css"); 
    var clickHandler=function()
    {
        css.href=this.rel; return false;
    };
    for(var i=0;i<anchors.length;i++)
    {
        var anchor=anchors[i];
        anchor.onclick=clickHandler;
    }
};

The above code inside the window.onload event handler is formally more complete below:

var clickHandler=function()
{
    css.href=this.rel; return false;
};
if(document.addEventListener)
{ //DOM2
    for(var i=0,anchor;i<anchors.length;i++)
    {
        anchor=anchors[i];
        anchor.addEventListener("click",clickHandler,false);
    }
}
else if(document.attachEvent)
{ //IE
    var ieHandler=function(a)
    {
        return function(){clickHandler.call(a,event);};
    };
    for(var i=0,anchor;i<anchors.length;i++)
    {
        anchor=anchors[i];
        //anchor.attachEvent("onclick",function()
        //{clickHandler.call(anchor,event);}); 
        anchor.attachEvent("onclick",ieHandler(anchor) ); }
    }
else
{//old-fashioned way
    for(var i=0,anchor;i<anchors.length;i++)
    {
        anchor=anchors[i];
        anchor.onclick=clickHandler;
    } 
}