專案中需要用到動態載入CSS 文件，整理了一下，順便融合了動態載入JS 的功能寫成了一個對象，先上程式碼：
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
物件包含兩個完全獨立的方法，分別用來載入CSS 檔案和JS 文件，參數皆為想要載入的檔案路徑。原理非常的簡單：對於不同的載入檔案類型建立不同的節點，然後新增各自的屬性，最後丟到head 標籤裡面。經測試，本方法相容於各瀏覽器，安全、無毒、環保，是 web 開發人員工作常備程式碼。
下面是呼叫程式碼，異常簡單：
//动态加载 CSS 文件
dynamicLoading.css("test.css");
//动态加载 JS 文件
dynamicLoading.js("test.js");
以上就是告訴大家如何實作JavaScript動態載入CSS和JS文件，希望對大家的學習有幫助。
