动态加载 CSS

Posted 2023-02-22

【中文标题】动态加载 CSS

【英文标题】：Dynamically loading CSS

【发布时间】：2011-04-14 05:49:45

【问题描述】：

我正在尝试为我的网站创建页面主题功能。我想使用单独的 CSS 文件在页面上动态加载相应的主题。

我正在使用此代码：

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

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

这很好用，但如果 CSS 文件是否已加载，它不会返回任何信息。

有没有办法在 .css 加载时捕获？也许通过使用 ajax？

【问题讨论】：

在此处查看有用的链接cssnewbie.com/simple-jquery-stylesheet-switcher

【参考方案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);    

它很丑，但它适用于所有浏览器。

【讨论】：

谢谢！哈哈，你说的丑是对的，但它确实有效。