Otaqui.com Blog

Simple script to load CSS from Javascript

Since I actually checked the search queries leading to this site, I found that quite a few people come here looking to learn about loading CSS with Javascript.  I posted about getting an onload callback when loading css, but I thought I’d also post a really simple method for loading CSS without any dependencies.

The loadcss() function below is very straightforward – it just creates a link tag with the appropriate attributes and appends it to the head of the document.

You can see a demo of the loadcss script in action .

<html lang="en-US">
 <meta charset="UTF-8">
 <title>Load CSS With Javascript</title>
 <h1>Load CSS With Javascript</h1>
 <button>Load the CSS</button>
 <script type="text/javascript" src="loadcss.js"></script>
 <script type="text/javascript">
 * Loads a CSS file from the supplied URL
 * @param {String} url    The URL of the CSS file, if its relative
                          it will be to the current page's url
 * @return {HTMLElement}  The <link> which was appended to the <head>
 function loadcss(url) {
   var head = document.getElementsByTagName('head')[0],
   link = document.createElement('link');
   link.type = 'text/css';
   link.rel = 'stylesheet';
   link.href = url;
   return link;
 // I've used raw DOM API here, but it would be even simpler
 // with something like jQuery
 var button = document.getElementsByTagName('button')[0];
 button.addEventListener('click', function(ev) {
 }, false);