How to load up CSS files using Javascript

Question

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  lt head gt  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

User · Answer

Here s a way with jQuery s element creation method  my preference  and with callback onLoad   var css       lt link gt         rel     stylesheet      type      text css      href     style css     0    css onload   function      console log  CSS IN IFRAME LOADED        document    getElementsByTagName  head   0     appendChild css

User · Answer

Element insertAdjacentHTML has very good browser support  and can add a stylesheet in one line   document getElementsByTagName  head   0  insertAdjacentHTML       beforeend         lt link rel   stylesheet   href   path to style css     gt

User · Answer

use  document getElementById  quot of head body tag quot            innerHTML      lt link rel  quot stylesheet quot  type  quot text css quot  href  quot style css quot  gt

User · Answer

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    gt        let link   document createElement  link        link type    text css       link rel    stylesheet       link onload   function     resolve    console log  style has loaded           link href   url       let headScript   document querySelector  script        headScript parentNode insertBefore link  headScript

User · Answer

If you use jquery      head   append   lt link rel  stylesheet  type  text css  href  style css  gt

User · Answer

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

User · Answer

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

User · Answer

You may use for this YUI library or use this article to implement

User · Answer

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    lt script src  https   unpkg com async-assets-loader  gt  lt  script gt   lt script gt  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            lt  script gt     According to the async-assets-loader docs

User · Answer

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  amp  amp    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               gt  loadScript  libraries      listen   functions    speak    commands    wsBrowser    main               gt  loadScript  scripts      index                gt  loadStyle  styles      index

User · Answer

var elem   document createElement  link    elem rel     stylesheet  elem href   style css    Link of the css file document head appendChild elem

User · Answer

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 com 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    lt script type  text javascript  gt  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     lt  script gt    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

User · Answer

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

User · Answer

Using jQuery     head   append   lt link rel  quot stylesheet quot  href  quot stylesheetfile css quot  type  quot text css quot    gt

User · Answer

I guess something like this script would do    lt script type  text javascript  src   js styles js  gt  lt  script gt    This JS file contains the following statement   if   document getElementById  document write   lt link rel  stylesheet  type  text css  href   css versions4 css  gt       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     lt script type  text javascript  gt     lt   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          gt

User · Answer

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

User · Answer

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

User · Answer

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        gt  resolve link           link onerror        gt  reject new Error  Style load error for   src               document head append link              You can implement it as follows  window onload   function          loadStyle  quot https   fonts googleapis com css2 family Raleway amp display swap quot            then      gt  loadStyle  quot css style css quot             then      gt  loadStyle  quot css icomoon css quot             then      gt                alert  All styles are loaded                catch err   gt  alert err       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

User · Answer

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

User · Answer

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      lt link rel  quot stylesheet quot  href  quot css style css quot  gt    Most browsers support it  See the browser compatibility

[javascript] How to load up CSS files using Javascript?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to dhtml