原生js實現的動態載入css和js檔案程式碼例項

下面分享一段程式碼例項，能夠實現動態載入css和js檔案的功能。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
function loadjscssfile(filename,filetype){ 
  if(filetype=="js"){
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
  } 
  else if (filetype=="css"){
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
  } 
  if(typeof fileref!="undefined") 
  document.getElementsByTagName("head")[0].appendChild(fileref) 
} 
loadjscssfile("antzone.js", "js");
loadjscssfile("style.css", "css");

上面的程式碼實現了動態載入效果，下面介紹一下實現過程。

一.程式碼註釋:

1.function loadjscssfile(filename,filetype){},第一個引數是要引入的檔名稱，第一個引數規定型別。

2.if(filetype=="js")，如果型別是js。3.var fileref=document.createElement('script')，動態建立一個script元素。

4.fileref.setAttribute("type","text/javascript")，設定type屬性。

5.fileref.setAttribute("src", filename) ，設定src屬性。

6.if(typeof fileref!="undefined")，如果不為undefined。

7.document.getElementsByTagName("head")[0].appendChild(fileref) ，將建立的物件新增到head標籤中。

二.相關閱讀:

1.createElement()函式可以參閱js createElement()一章節。

2.setAttribute()函式可以參閱javascript setAttribute()一章節。