How to load up CSS files using Javascript?

Posted by Editorial Staff | Updated on January 30, 2020

Want to load up CSS files using Javascript? 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);

}

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:

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>

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

How to load up CSS files using Javascript?

Related Questions & Answers

Solved Programs