當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 动态加载脚本和样式的方法

發布時間：2025/6/15 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

二動態樣式

為了動態的加載樣式表,比如切換網站皮膚;
樣式有兩種方式進行加載,一種是<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

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