Three ways to dynamically load CSS in JavaScript

If you have many related CSS files to load together, or want to load different CSS files dynamically, then the following methods will definitely help you.

The first type: generally used to load necessary files in external CSS files

code

@import url(style.css);
/*Can only be used in CSS files or style tags*/

The second: simply load an external CSS file in the page

code

document.createStyleSheet(cssFile);

The third type: use the createElement method to create a CSS Link tag

code

var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);

Here are a few functions that I used in the project before, I hope it will be useful to everyone!

code

function loadJs(file){     var scriptTag = document.getElementById('loadScript');     var head = document.getElementsByTagName('head').item(0);     if(scriptTag) head.removeChild(scriptTag);     script = document. createElement('script');     script.src = "../js/mi_"+file+".js";     script.type = 'text/javascript';     script.id = 'loadScript';     head.appendChild(script) ; } function loadCss(file){     var cssTag = document.getElementById('loadCss');     var head = document.getElementsByTagName('head').item(0);     if(cssTag) head.removeChild(cssTag);     css = document.createElement('link');     css.href = "../css/mi_"+file+".css";

    css.rel = 'stylesheet';
    css.type = 'text/css';
    css.id = 'loadCss';
    head.appendChild(css);
}

Related: Three ways to dynamically load CSS in JavaScript