Three ways for JavaScript to dynamically load CSS

css|javascript| Dynamic | load If you have a lot of related CSS files to load together, or want to dynamically load different CSS files, then the following methods you must be helpful.

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

Program Code @import URL (style.css);
/* can only be used in a CSS file or in a style label * *

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

Program Code Document.createstylesheet (cssfile);

Third: Create a CSS link tag with the CreateElement method

Program 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, I used several functions in the project, I hope to be useful!

Program 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);
}