Question

I’ve been reading up on how I can dynamically load a css file using jquery at the page’s runtime, but haven’t been able to find anything on this… what I am wondering if it is possible to basically re-load a css file to reflect changes from the server side..

The reason for this is that I am making an app that offers a number of different page layout sizes and I ran into some strange issues when doing modification of every css element on the page using jquery so I am making a server side script that will create a number of different css file that are identical, except for the sizes of the elements.. so I want to make it so I can dynamically load in a new version of this at any time and it will replace the original and reflect the changes in the page layout.. I am not sure if this is possible using the other scripts that do dynamic loading as it didn’t seem to mention this use case. Thanks for any info.

Answer 1

We do something similar in our web app. The users can choose between several predefined layouts.

There is a static CSS file loaded normally with common styles shared by all layouts.

Then the function below receives a CSS string delivered by the server:

var setStyle = function (css){
    //css has the format: selector{...style...}
    var styleNode, 
        cur = document.getElementById('_theme');
    cur && cur.parentNode.removeChild(cur);

    styleNode = document.createElement('style');
    styleNode.setAttribute('type', 'text/css');
    styleNode.setAttribute('id', '_theme');
    document.getElementsByTagName('head')[0].appendChild(styleNode);

    if((/MSIE/).test(navigator.userAgent)){
        styleNode.styleSheet.cssText = css;
    }else{
        styleNode.appendChild(document.createTextNode(css));
    }
}

The function adds a STYLE tag with the id _theme and insert the CSS definition in it.
And the layout is applied to the page.
If the id _theme exists already, it is replaced.

More recently we developed a mobile version of our web app and we changed radically the technique.
The style is not defined by a static CSS anymore but from a JSON that we can generate dynamically, using variables, functions, etc… directly from the browser.

We made a small JS lib of it, the code is available at: http://github.com/pure/jstyle