Programmatically load CSS using JS

Question

I am trying to achieve the following:

I have a server-side script that generates CSS code depending on GET parameters
On user request a JS should now do the following
- Load a new CSS file
- When loading is done, fade to the newly loaded style

Problem here is the last step.

It is no problem to add a new CSS file to the DOM, but how do I know when the browser finished loading the file? I cannot start animations using the newly loaded styles until the file is actually loaded.

Alternatively: Is it possible to load a CSS file using Async Requests, and inject the CSS code into the DOM using Javascript without parsing it by hand?

Thank you very much!

Dennis

Dominique · Accepted Answer · 2011-08-17 16:12:06Z

8

I know this question is quite old, but in case anyone Googles this, here is a function that lets you define a callback to let you know when the stylesheet is loaded:

    var css = function(url, callback) {

         var head = document.getElementsByTagName('head')[0];
         var cssnode = document.createElement('link');

         cssnode.type = 'text/css';
         cssnode.rel = 'stylesheet';
         cssnode.href = url;

         cssnode.onreadystatechange = callback;
         cssnode.onload = callback;

         head.appendChild(cssnode);
     }

answered Aug 17, 2011 at 16:12

Dominique

4145 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dennis Kempin Over a year ago

Cool, do you know which browsers support this?

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

there are a nice library for this kind of filters...

maybe you can give that a try:

Yep Nope

Yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 17, 2011 at 9:54

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

2 Comments

Dennis Kempin Over a year ago

This library looks great! I will give it a try, Thank you very much balexandre!

balexandre Over a year ago

No need to thank... upvote for that, and if that the answer you were looking for, make the answer as correct answer :)

Vishal · Accepted Answer · 2011-03-17 09:49:30Z

1

function loadjscssfile(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)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

answered Mar 17, 2011 at 9:49

Vishal

111 bronze badge

3 Comments

Dennis Kempin Over a year ago

Sorry, this is not what I was looking for. The core problem is getting notified when the file finished loading.

Vishal Over a year ago

Then you can use jquery.load method to get notified when the script has been completed downloaded on the client computer. You can perform any action using the callback it provides.

RozzA Over a year ago

this was simple and allowed me to inject googlefonts CSS into a hosted solution that does not allow me to set external CSS by default.

Collectives™ on Stack Overflow

Programmatically load CSS using JS

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related