Three methods for loading CSS dynamically using JavaScript

If you have many associated CSS files to be loaded together, or want to dynamically load different CSS files, the following methods must be helpful to you.

First, it is generally used to load necessary files in external CSS files.

Program code @ import url(style.css );
/* It can only be used in CSS files or style labels */

Type 2: simply load an external CSS file in the page

Program code document. createstylesheet (cssfile );

Third: Use the createelement method to create CSS link labels

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 are some of the functions I used in my previous projects. I hope they will be useful to you!

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