當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 动态加载脚本和样式的方法
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 动态加载脚本和样式的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一 動態腳本
當網站需求變大,腳本的需求也逐步變大;我們不得不引入太多的JS腳本而降低了整站的性能;
所以就出現了動態腳本的概念,在適時的時候加載相應的腳本;
1.動態引入js文件
?| 1 2 3 4 5 6 7 8 9 10 | var flag = true; if(flag){? ??loadScript('browserdetect.js');????????? // 調用函數,引入路徑; } function loadScript(url){ ??var script = document.createElement('script');?? // 創建script標簽; ??script.type = 'text/javascript';????????? // 設置type屬性; ??script.src = url;???????????????? // 引入url; ??document.getElementsByTagName('head')[0].appendChild(script);? // 將script引入<head>中; } |
2.動態執行js代碼
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var script = document.createElement('script'); script.type = 'text/javascript'; var text = document.createTextNode("alert('Lee')");? // 設置script標簽內容;IE會報錯; script.appendChild(text); document.getElementsByTagName('head')[0].appendChild(script); // PS:IE瀏覽器認為script是特殊元素,不能再訪問子節點; // 為了兼容,可以使用text屬性來代替; function loadScriptString(code){ ??var script = document.createElement("script"); ??script.type = "text/javascript"; ??try{ ??// IE瀏覽器認為script是特殊元素,不能再訪問子節點;報錯; ????script.appendChild(document.createTextNode(code)); // W3C方式; ??}catch(ex){ ????script.text = code; // IE方式; ??} ??document.body.appendChild(script); } // 調用; loadScriptString("function sayHi(){alert('hi')}"); |
二 動態樣式
為了動態的加載樣式表,比如切換網站皮膚;
樣式有兩種方式進行加載,一種是<link>標簽,一種是<style>標簽;
1.動態引入link文件
?| 1 2 3 4 5 6 7 8 9 10 11 | 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); } |
2.動態執行style代碼
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var flag = true; if(flag){ ??var style = docuemnt.createElement('style'); ??style.type = 'text/css'; ??document.getElementsByTagName('head')[0].appendChild(style); ??insertRule(document.styleSheets[0],'#box','background:red',0); } function insertRule(sheet,selectorText,cssText,position){ ??// 如果是非IE; ??if(sheet.insertRule){ ????sheet.insertRule(selectorText+"{"+cssText+"}",position); ??// 如果是IE; ??}else if(sheet.addRule){ ????sheet.addRule(selectorText,cssText,position); ??} } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 動態執行style2 ??function loadStyleString(css){ ????var style = document.createElement("style"); ????style.type = "text/css"; ????try{ ????// IE會報錯;不允許向<style>元素添加子節點; ??????style.appendChild(document.createTextNode(css)); ????}catch(ex){ ????// 此時,訪問元素的StyleSheet屬性,該屬性有有一個cssText屬性,可以接受CSS代碼; ??????style.styleSheet.cssText = css; ????} ????var head = document.getElementsByTagName("head")[0]; ????head.appendChild(style); ??} ??// 調用; ??loadStyleString("body {background-color:red}"); |
總結
以上是生活随笔為你收集整理的JavaScript 动态加载脚本和样式的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DOM操作表格的各种属性[z]
- 下一篇： 看图理解scrollTop,scroll