动态加载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实现？

- Moe

---

请查看此处有用的链接：http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/ - Pramendra Gupta

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

虽然不太美观，但可以在所有浏览器中正常工作。

- Randy the Dev

---

谢谢！哈哈，你说得对，虽然它很丑，但它确实完成了任务。 - Moe