Changing CSS file with JavaScript

**CubicalPhil** · 04-14-2008, 07:18 AM

Is it possible to change the linked stylesheet a page looks at using javascript attached to a hyperlink?

If so how would I go about this?

**Paramiliar** · 04-15-2008, 04:00 AM

I have this feature setup on our supply portal Xactio http://www.xactio.co.uk

Code:

    function setcss(TYPE, COLOUR){
        var THEFILE = '<?=WEBSITEURL;?>styles/themes/' + TYPE + '.css'
        var cssNode = document.createElement('link');
        cssNode.setAttribute('rel', 'stylesheet');
        cssNode.setAttribute('type', 'text/css');
        cssNode.setAttribute('href', THEFILE);
        document.getElementsByTagName('head')[0].appendChild(cssNode); 
    }

this is how I did it, all it does is add another tag just below the head start tag which adds a new stylesheet.

If you wanted to change the existing one I am sure this could be done

**wayfarer07** · 04-15-2008, 02:52 PM

Not sure if that can be done, but why don't you just change a class on the body that has different derivatives in a stylesheet that is being linked to already?

**zxcvbnm60** · 01:17 PM

I change the href property of the link HTML element.

Code:

<html>
    <head>
        <title>Sheeter Productivity</title>
         <link id="myStyleSheet" href="sheeters.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">
function getNewCSS(cssIndex) {
    var newStyleSheet;
    switch (cssIndex) {
        case 1:
            newStyleSheet='sheeters_1024x768.css';
            break;
        case 2:
            newStyleSheet='sheeters_1024x768_redlight.css';
            break;
        default:
            newStyleSheet='sheeters.css';
            break;
    }
    document.getElementById("myStyleSheet").href=newStyleSheet;
}
</script>
</head>
<body>  
<a href="javascript:getNewCSS(0); void(0);">1280x1024</a><br>
<a href="javascript:getNewCSS(1); void(0);">1024x768</a><br>
<a href="javascript:getNewCSS(2); void(0);">1024x768 red light</a>
</body>
</html>