HTML dynamic loading css style and js script example_HTML/Xhtml

1. Dynamic loading script

As the demand for the website increases, the demand for scripts also gradually increases. We had to introduce too many JS scripts and reduced the performance of the entire site, so the concept of dynamic scripts emerged to load the corresponding scripts at the right time. For example: We want to introduce the detection file when we need to detect the browser.

Copy code The code is as follows: window.onload = function(){ alert(typeof BrowserDetect); } var flag = true; //Set true and then load if (flag) { loadScript('browserdetect.js'); //Set loaded js } function loadScript(url) { var script = document.createElement('script'); script. type = 'text/javascript'; script.src = url; //document.head.appendChild(script); //document.head means document.getElementsByTagName('head ')[0].appendChild(script); } Dynamic execution of js

window.onload = function(){

} var flag = true; //Set true again Load 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); } IE 6, 7, and 8 browsers consider script to be a special element and cannot access child nodes. For compatibility, the text attribute can be used instead.

window.onload = function(){

} var flag = true; //Set true again Load if (flag) { var script = document.createElement('script'); script.type = 'text/javascript'; script.text = "alert('Lee' )"; script.appendChild(text); document.getElementsByTagName('head')[0].appendChild(script); } Required for all browsers Compatible 2. Dynamically loading styles

In order to dynamically load style sheets, such as switching website skins. There are two ways to load style sheets, one is the tag, and the other is the 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 of style

Copy code The code is as follows: var flag = true; if (flag) { var style = document.createElement('style'); style.type = 'text/css'; //var box= document.createTextNode('#box{background:red}');// IE6,7,8 does not support //style.appendChild(box); document.getElementsByTagName('head ')[0].appendChild(style); insertRule(document.styleSheets[0], '#box', 'background:red', 0); } function insertRule(sheet, selectorText , cssText, position) { //If it is not IE6,7,8 if (sheet.insertRule) { sheet.insertRule(selectorText "{" cssText "}", position); //If it is IE6,7,8 } else if (sheet.addRule) { sheet.addRule(selectorText, cssText, position); } }

HTML dynamic loading css style and js script example_HTML/Xhtml_web page production