Tải động CSS

Question

Tôi đang cố tạo chức năng chủ đề trang cho trang web của mình. Tôi muốn tải các chủ đề tương ứng động trên trang bằng cách sử dụng các tệp CSS riêng biệt.

Tôi đang sử dụng mã này:

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

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

nào hoạt động tốt, nhưng nó không trả lại bất kỳ thông tin nếu file CSS đã nạp hay không.

Có cách nào để nắm bắt khi tải .css không? Có lẽ bằng cách sử dụng ajax?

Answer 1

Internet Explorer sẽ kích hoạt sự kiện onReadyStateChange khi tệp CSS được tải (hoặc bất kỳ thay đổi nào khác trong đó là readyState). Các trình duyệt khác không kích hoạt bất kỳ sự kiện nào, vì vậy bạn sẽ phải tự kiểm tra xem biểu định kiểu đã được tải hay chưa, có thể dễ dàng thực hiện bằng cách kiểm tra đối tượng document.styleSheets tại một khoảng thời gian cố định.

Ví dụ

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);  
} 

Nó xấu xí, nhưng nó hoạt động trong tất cả các trình duyệt.