CODEWITHSUNDEEP
javascripthtmlcssdhtml
Ali
Ali

Reputation: 267049

How to load up CSS files using Javascript?

Is it possible to import css stylesheets into a html page using Javascript? If so, how can it be done?

P.S the javascript will be hosted on my site, but I want users to be able to put in the <head> tag of their website, and it should be able to import a css file hosted on my server into the current web page. (both the css file and the javascript file will be hosted on my server).

Upvotes: 416

Views: 719758

Answers (21)

Anil kumar
Anil kumar

Reputation: 1628

Answer from future. In 2022, we have import assertions api for import css file.

import mycssSheet from "./style/mycss.css" with { type: "css" };
    document.adoptedStyleSheets = [mycssSheet];
    shadowRoot.adoptedStyleSheets = [mycssSheet];

Browser support: till september 2022, only chromium based browsers and safari supported.

Read more at: v8 import assertions post

tc39 github t39 import assertions proposal

Upvotes: 11

VonC
VonC

Reputation: 1323125

I guess something like this script would do:

<script type="text/javascript" src="/js/styles.js"></script>

This JS file contains the following statement:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

The address of the javascript and css would need to be absolute if they are to refer to your site.

Many CSS import techniques are discussed in this "Say no to CSS hacks with branching techniques" article.

But the "Using JavaScript to dynamically add Portlet CSS stylesheets" article mentions also the CreateStyleSheet possibility (proprietary method for IE):

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

Upvotes: 56

dangowans
dangowans

Reputation: 2403

Element.insertAdjacentHTML has very good browser support, and can add a stylesheet in one line.

document.head.insertAdjacentHTML(
    'beforeend',
    '<link rel="stylesheet" href="path/to/style.css" />');

Upvotes: 47

Dominick
Dominick

Reputation: 61

In 2024 with plain javascript I came out with this functions. If this may be any useful for someone else.

This functions can loads a CSS file/files and can be provided with a callback function nofifying you when the file/files is/are loaded and ready. This is tested and working code.

Edit: Also, this functions are safe to be called from a button click event for example, as it checks if a link to the css file already exist. If the css file is already loaded it will immediately call the onReady call back function.

/*
 * Load a CSS file.
 * @param {string} url : The url of the resourse to load.
 * @param {function} onReady : Call back when the resource has been loaded.
 */
function getCss(url, onReady)
{
    const links = document.querySelectorAll("link[href='" + url + "']");
    if (links.length === 0)
    {
        var head = document.getElementsByTagName( "head" )[0];
        var fileref = document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", url);
            if (onReady instanceof Function)
            {
                fileref.onload  = onReady;
                fileref.onreadystatechange = onReady;
            }
            head.insertBefore( fileref, head.firstChild );
    }
    else
    {
        if (onReady instanceof Function)
            onReady();
    }
}

/*
 * Loads a list of css files.
 * @param {array|string} urls : This can pass a single url, or an array of urls.
 * @param {function} onReady : This is the callback after each css file has been loaded.
 */
function getCssList(urls, onReady)
{
    if (Array.isArray(urls))
    {
        let awaiting = urls.length;
        function doneAwaiting()
        {
            awaiting--;
            if (awaiting === 0)
            {
                if (onReady instanceof Function)
                    onReady();
            }
        }
        for (let i = 0; i < urls.length; i++)
        {
            getCss(urls[i], doneAwaiting);
        }
    }
    else
    {
        getCss(urls, onReady);
    }
}

To use it simply

// Single css file.
getCss("url to css file", () => { /* do something when css is ready */ });

// a list of css files
getCssList
(
  ["url 1", "url 2", ...],
  () =>
  {
    // Do something where css files are ready.
  }
);

Upvotes: 1

Iglesias Leonardo
Iglesias Leonardo

Reputation: 544

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:

function loadStyle(src) {
    return new Promise(function (resolve, reject) {
        let link = document.createElement('link');
        link.href = src;
        link.rel = 'stylesheet';

        link.onload = () => resolve(link);
        link.onerror = () => reject(new Error(`Style load error for ${src}`));

        document.head.append(link);
    });
}

You can implement it as follows:

window.onload = function () {
    loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
        .then(() => loadStyle("css/style.css"))
        .then(() => loadStyle("css/icomoon.css"))
        .then(() => {
            alert('All styles are loaded!');
        }).catch(console.error);
}

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

Upvotes: 9

Tiberiu C.
Tiberiu C.

Reputation: 3513

The dynamic version using imports and assertion type css, when you want the style adopted just after an action.

(async ()=>{
   const sheet = await import('./css/style.css', {assert: { type: 'css' }});
   document.adoptedStyleSheets = [sheet]; // global 
   // or el.shadowRoot.adoptedStylesSheets = [sheet] for an element with shadow dom attached
})();

EDIT

When needing to adopt more styles just push to it, since adoptedStyleSheets is an array :

document.addoptedStyles.push(style)

Or initlialize with multiple imports :

(async ()=>{
   const sheet = await import('./css/style.css', {assert: { type: 'css' }});
   const commonSheet = await import('./css/common-style.css', {assert: { type: 'css' }});
   document.adoptedStyleSheets = [commonSheet, sheet]; // global 
   // or el.shadowRoot.adoptedStylesSheets = [commonSheet, sheet] for an element with shadow dom attached
})();

Upvotes: -1

G-Force53
G-Force53

Reputation: 23

If you want no cache

var date = new Date().getTime();
document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="/styles.css?='+date+'">';

Upvotes: 1

vatavale
vatavale

Reputation: 1620

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.

const loadStyle = function () {
    let cache = {};
    return function (src) {
        return cache[src] || (cache[src] = new Promise((resolve, reject) => {
            let s = document.createElement('link');
            s.rel = 'stylesheet';
            s.href = src;
            s.onload = resolve;
            s.onerror = reject;
            document.head.append(s);
        }));
    }
}();

Please notice the parentheses () after the function expression.

Parallel loading of stylesheets:

Promise.all([
    loadStyle('/style1.css'),
    loadStyle('/style2.css'),
    // ...
]).then(() => {
    // do something
})

You can use the same method for dynamic loading scripts.

Upvotes: 4

sandstrom
sandstrom

Reputation: 15082

If you want to know (or wait) until the style itself has loaded this works:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = () => resolve();
    link.onerror = () => reject();
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

Usage:

fetchStyle(url)
 .then(
   () => console.log("style loaded succesfully"),
   () => console.error("style could not be loaded"),
);

Upvotes: 23

user58777
user58777

Reputation:

Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute unfortunately IE6 doesn't support it consistently.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.example/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

This example checks if the CSS was already added so it adds it only once.

Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.

VanillaJS

Here is an example that uses plain JavaScript to inject a CSS link into the head element based on the filename portion of the URL:

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Insert the code just before the closing head tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js) file will cause a Flash of unstyled content (FOUC) to appear.

Upvotes: 546

Iglesias Leonardo
Iglesias Leonardo

Reputation: 544

Here's a one line example, that uses plain JavaScript to inject a CSS link into the head element based on the filename portion of the URL:

document.head.innerHTML += '<link rel="stylesheet" href="css/style.css">';

Most browsers support it. See the browser compatibility.

Upvotes: 8

user13995420
user13995420

Reputation:

use:

document.getElementById("of head/body tag")
        .innerHTML += '<link rel="stylesheet" type="text/css" href="style.css">';

Upvotes: -1

v.babak
v.babak

Reputation: 906

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 async-assets-loader. See the example below:

<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
      {uri: jsfile, type: "script"},
      {uri: cssfile, type: "style"},
      {uri: imgfile, type: "img"}
    ], function () {
      console.log("Assets are loaded");
      console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
    });
</script>

According to the async-assets-loader docs

Upvotes: 2

Arthur Tarasov
Arthur Tarasov

Reputation: 3791

In a modern browser you can use promise like this. Create a loader function with a promise in it:

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

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:

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

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

Upvotes: 15

Gaurav Tripathi
Gaurav Tripathi

Reputation: 1355

Use this code: 

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);

Upvotes: 16

Hasan A Yousef
Hasan A Yousef

Reputation: 24908

Below a full code using for loading JS and/or CSS

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();

Upvotes: 4

BoumTAC
BoumTAC

Reputation: 3771

If you use jquery:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

Upvotes: 91

Lounge9
Lounge9

Reputation: 1402

Here's a way with jQuery's element creation method (my preference) and with callback onLoad:

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);

Upvotes: 3

ekoindra0912
ekoindra0912

Reputation: 13

var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

I'm using thymeleaf and this is work fine. Thanks

Upvotes: -1

JohanSellberg
JohanSellberg

Reputation: 2503

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.

Upvotes: 11

ez2
ez2

Reputation: 39

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/

Upvotes: 3

Related Questions