如何實現JavaScript動態加載CSS和JS文件

項目中須要用到動態加載CSS 文件，整理了一下，順便融合了動態加載JS 的功能寫成了一個對象，先上代碼：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

vardynamicLoading = {   css:function(path){  if(!path || path.length === 0){   thrownewError('argument "path" is required !');  }  varhead = document.getElementsByTagName('head')[0];     varlink = document.createElement('link');     link.href = path;     link.rel ='stylesheet';     link.type ='text/css';     head.appendChild(link);   },   js:function(path){  if(!path || path.length === 0){   thrownewError('argument "path" is required !');  }  varhead = document.getElementsByTagName('head')[0];     varscript = document.createElement('script');     script.src = path;     script.type ='text/javascript';     head.appendChild(script);   } }

對象包含兩個徹底獨立的方法，分別用來加載CSS 文件和JS 文件，參數均爲欲加載的文件路徑。原理很是的簡單：對於不一樣的加載文件類型建立不一樣的節點，而後添加各自的屬性，最後扔到head 標籤裏面。經測試，本方法兼容各瀏覽器，安全、無毒、環保，是 web 開發人員工做常備代碼。
下面是調用代碼，異常簡單：

?

1 2 3 4 5

//動態加載 CSS 文件 dynamicLoading.css("test.css");   //動態加載 JS 文件 dynamicLoading.js("test.js");

以上就是告訴你們如何實現JavaScript動態加載CSS和JS文件，但願對你們的學習有所幫助。