DIV CSS 佈局教程網

項目中需要用到動態加載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文件，希望對大家的學習有所幫助。