動態加載CSS

Question

我正在嘗試爲我的網站創建頁面主題功能。我想使用單獨的CSS文件在頁面上動態加載相應的主題。

我使用這個代碼：

fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", 'link.css') 

    document.getElementsByTagName("head")[0].appendChild(fileref) 

，工作正常，但如果CSS文件加載或沒有它不返回任何信息。

加載.css時有沒有辦法捕獲？也許通過使用Ajax？

Answer 1

加載CSS文件（或其中的任何其他更改readyState）時，Internet Explorer將觸發onReadyStateChange事件。 其他瀏覽器不會觸發任何事件，因此您必須手動檢查樣式表是否已加載，這很容易通過以固定的時間間隔檢查document.styleSheets對象。

例

window.onload = function(){ 
    var filename = "link.css",sheet,i; 
    var fileref = document.createElement("link"); 

    fileref.setAttribute("rel", "stylesheet"); 
    fileref.setAttribute("type", "text/css"); 
    fileref.setAttribute("href", filename); 

    readyfunc = function() { 
     alert("File Loaded"); 
    } 

    timerfunc = function(){ 
     for (i=0;i<document.styleSheets.length;i++){ 
      sheet = document.styleSheets[i].href; 
      if(sheet !== null && sheet.substr(sheet.length-filename.length) == filename) 
       return readyfunc(); 
     } 
     setTimeout(timerfunc,50); 
    } 

    if (document.all){ //Uses onreadystatechange for Internet Explorer 
     fileref.attachEvent('onreadystatechange',function() { 
      if(fileref.readyState == 'complete' || fileref.readyState == 'loaded') 
       readyfunc(); 
     }); 
    } else { //Checks if the stylesheet has been loaded every 50 ms for others 
     setTimeout(timerfunc,50); 
    } 
    document.getElementsByTagName("head")[0].appendChild(fileref);  
} 

這是醜陋的，但它在所有瀏覽器上運行。