HTML dynamic loading CSS style and JS script example

Time:2020-3-23

1、 Loading scripts dynamically

As the demand for websites grows, so does the demand for scripts. We have to introduce too many JS scripts to reduce the performance of the whole station, so there is the concept of dynamic script, loading the corresponding script at the right time.
For example, we want to introduce detection files when we need to detect browsers.

Copy code

The code is as follows:

<script type=”text/javascript”>
window.onload = function(){
alert(typeof BrowserDetect);
}
Var flag = true; / / set true to reload
if (flag) {
Loadscript (‘browserdetect. JS’); / / set the loaded JS
}
function loadScript(url) {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = url;
//Document.head.appendchild (script); / / document.head means < head >
document.getElementsByTagName(‘head’)[0].appendChild(script);
}
Dynamic execution of JS</p>
<script type=”text/javascript”>
window.onload = function(){

}
Var flag = true; / / set true to reload
if (flag) {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
Var text = document.createtextnode (“alert (‘Lee ‘))); / / ie6,7,8 browser error
script.appendChild(text);
document.getElementsByTagName(‘head’)[0].appendChild(script);
}
The browser of < / script > ie 6,7,8 thinks that script is a special element and cannot access child nodes. For compatibility, use the text property instead. </p>
<script type=”text/javascript”>
window.onload = function(){

}
Var flag = true; / / set true to reload
if (flag) {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.text = “alert(‘Lee’)”;
script.appendChild(text);
document.getElementsByTagName(‘head’)[0].appendChild(script);
}
Need to be compatible with all browsers

2、 Dynamic load style

In order to load stylesheets dynamically, such as switching the website skin. There are two ways to load a stylesheet: the < link > tag and the < style > tag.

Dynamic execution link

Copy code

The code is as follows:

var flag = true;
if (flag) {
loadStyles(‘basic.css’);
}
function loadStyles(url) {
var link = document.createElement(‘link’);link.rel = ‘stylesheet’;
link.type = ‘text/css’;
link.href = url;
document.getElementsByTagName(‘head’)[0].appendChild(link);
}

   
Dynamic execution style

Copy code

The code is as follows:

<script type=”text/javascript”>
var flag = true;
if (flag) {
var style = document.createElement(‘style’);
style.type = ‘text/css’;
//Var box = document. CreateTextNode (‘{background: Red}’); / / not supported by ie6,7,8
//style.appendChild(box);
document.getElementsByTagName(‘head’)[0].appendChild(style);
insertRule(document.styleSheets[0], ‘#box’, ‘background:red’, 0);
}
function insertRule(sheet, selectorText, cssText, position) {
//If not ie6,7,8
if (sheet.insertRule) {
sheet.insertRule(selectorText + “{” + cssText + “}”, position);
//If ie6,7,8
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}
</script>