Javascript: Stylesheet Switcher

add-to-head.html

    
<link id="linkidstylesheet" href='default.css' rel='stylesheet' type='text/css' >
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

style-switcher-ins.html

<a class="colorbox btnstylesheet1" href="?theme=sty1" title="style 1"></a>

<a class="colorbox btnstylesheet2" href="?theme=sty2" title="style 2"></a>
                    
<a class="colorbox btnstylesheet3" href="?theme=sty3" title="style 3"></a>

styleswitcher-script.js

// Remove  if not in html 
<script>
 

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
    // Apply some CSS3 to keep the CSS file CSS 2.1 valid
    $("h1").css("text-shadow", "0px 2px 6px #000");
    $("h2 a").css("text-shadow", "0px 2px 6px #000");
 
    // Color changer
    $(".btnstylesheet1").click(function(){
        $("#linkidstylesheet").attr("href", "stylesheet1.css");
        return false;
    });
    
    $(".btnstylesheet2").click(function(){
        $("#linkidstylesheet").attr("href", "stylesheet2.css");
        return false;
    });
    
    $(".btnstylesheet3").click(function(){
        $("#linkidstylesheet").attr("href", "stylesheet3.css");
        return false;
    });
     

});

// Remove if not in html 
</script>