CODEWITHSUNDEEP
javascriptjquerycss
Rick
Rick

Reputation: 17013

Jquery / Javascript Dynamically load CSS file (after runtime), replacing other css file?

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.

Upvotes: 1

Views: 5125

Answers (2)

Mic
Mic

Reputation: 25164

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

Upvotes: 1

Michael Robinson
Michael Robinson

Reputation: 29498

function createjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 return fileref
}

function replacejscssfile(oldfilename, newfilename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 var allsuspects=document.getElementsByTagName(targetelement)
 for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
   var newelement=createjscssfile(newfilename, filetype)
   allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
  }
 }
}

replacejscssfile("oldscript.js", "newscript.js", "js") //Replace all occurences of "oldscript.js" with "newscript.js"
replacejscssfile("oldstyle.css", "newstyle", "css") //Replace all occurences "oldstyle.css" with "newstyle.css"

From: http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

Upvotes: 2

Related Questions