asked Feb 22, 2009 at 13:48
Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use
This example checks if the CSS was already added so it adds it only once.
Insert the code just before the closing
answered Feb 23, 2009 at 9:25
If you use jquery:
answered Oct 28, 2015 at 9:13
3,2335 gold badges27 silver badges39 bronze badges
I guess something like this script would do:
This JS file contains the following statement:
Many CSS import techniques are discussed in this "Say no to CSS hacks with branching techniques" article.
answered Feb 22, 2009 at 13:56
1.2m492 gold badges4143 silver badges4884 bronze badges
Element.insertAdjacentHTML has very good browser support, and can add a stylesheet in one line.
answered Jun 12, 2018 at 17:22
2,1833 gold badges24 silver badges40 bronze badges
If you want to know (or wait) until the style itself has loaded this works:
answered Dec 2, 2016 at 14:01
14k7 gold badges64 silver badges61 bronze badges
Use this code:
answered Sep 27, 2017 at 4:17
In a modern browser you can use
Then obviously you want something done after the CSS has loaded. You can call the function that needs to run after CSS has loaded like this:
Useful links if you want to understand in-depth how it works:
Official docs on promises
Useful guide to promises
A great intro video on promises
answered Jul 5, 2018 at 3:41
Arthur TarasovArthur Tarasov
3,3018 gold badges42 silver badges57 bronze badges
I know this is a pretty old thread but here comes my 5 cents.
There is another way to do this depending on what your needs are.
I have a case where i want a css file to be active only a while. Like css switching. Activate the css and then after another event deativate it.
Instead of loading the css dynamically and then removing it you can add a Class/an id in front of all elements in the new css and then just switch that class/id of the base node of your css (like body tag).
You would with this solution have more css files initially loaded but you have a more dynamic way of switching css layouts.
answered Jan 25, 2012 at 8:04
2,3881 gold badge20 silver badges27 bronze badges
Have you ever heard of Promises? They work on all modern browsers and are relatively simple to use. Have a look at this simple method to inject css to the html head:
You can implement it as follows:
It's really cool, right? This is a way to decide the priority of the styles using Promises.
To see a multi-style loading implementation see: https://stackoverflow.com/a/63936671/13720928
answered Nov 4, 2020 at 16:47
There is a general jquery plugin that loads css and JS files synch and asych on demand. It also keeps track off what is already been loaded :) see: http://code.google.com/p/rloader/
answered Dec 12, 2010 at 12:01
Here's a way with jQuery's element creation method (my preference) and with callback
answered Oct 22, 2014 at 18:18
1,06510 silver badges19 bronze badges
Below a full code using for loading JS and/or CSS
answered Sep 6, 2016 at 12:08
Hasan A YousefHasan A Yousef
20.4k22 gold badges119 silver badges178 bronze badges
Most browsers support it. See the browser compatibility.
answered Sep 16, 2020 at 18:52
The YUI library might be what you are looking for. It also supports cross domain loading.
If you use jquery, this plugin does the same thing.
answered Feb 22, 2009 at 14:04
7,5927 gold badges45 silver badges60 bronze badges
answered Jul 31, 2020 at 10:36
I'd like to share one more way to load not only css but all the assets (js, css, images) and handle onload event for the bunch of files. It's
According to the async-assets-loader docs
answered Nov 26, 2019 at 18:42
7589 silver badges13 bronze badges
Answer from future. In 2022, we have import assertions api for import css file.
Browser support: till september 2022, only chromium based browsers supported.
Read more at: v8 import assertions post
tc39 github t39 import assertions proposal
answered Sep 22 at 13:26
I'm using thymeleaf and this is work fine. Thanks
answered Oct 21, 2014 at 4:45
1,5992 gold badges12 silver badges20 bronze badges
answered Aug 10, 2020 at 20:04
This function uses memorization. And could be called many times with no conflicts of loading and running the same stylesheet twice. Also it's not resolving sooner than the stylesheet is actually loaded.
Please notice the parentheses () after the function expression.
Parallel loading of stylesheets:
You can use the same method for dynamic loading scripts.
answered May 2 at 5:14
1,33618 silver badges29 bronze badges