使用JS编程加载CSS

问题描述

| 我正在努力实现以下目标： 我有一个服务器端脚本，该脚本根据GET参数生成CSS代码 应用户要求，JS现在应执行以下操作 加载一个新的CSS文件 加载完成后，淡出为新加载的样式 问题是最后一步。 将新的CSS文件添加到DOM没问题，但是我怎么知道浏览器何时完成加载该文件？ 在实际加载文件之前，无法使用新加载的样式启动动画。 或者：是否可以使用Async Requests加载CSS文件，并使用Javascript将CSS代码注入DOM中而无需手动解析它？ 非常感谢你！ 丹尼斯     

解决方法

有一个很好的库用于这种过滤器... 也许您可以尝试一下：   是的      Yepnope是一种超快速的异步条件资源加载器，它允许您仅加载用户所需的脚本。     ,我知道这个问题已经很老了，但是如果有人用谷歌搜索这个问题，下面的函数可以让您定义一个回调，以便在加载样式表时知道：

    var css = function(url,callback) {

         var head = document.getElementsByTagName(\'head\')[0];
         var cssnode = document.createElement(\'link\');

         cssnode.type = \'text/css\';
         cssnode.rel = \'stylesheet\';
         cssnode.href = url;

         cssnode.onreadystatechange = callback;
         cssnode.onload = callback;

         head.appendChild(cssnode);
     }

    ,

function loadjscssfile(filename,filetype){
 if (filetype==\"js\"){ //if filename is a external JavaScript file
  var fileref=document.createElement(\'script\')
  fileref.setAttribute(\"type\",\"text/javascript\")
  fileref.setAttribute(\"src\",filename)
 }
 else if (filetype==\"css\"){ //if filename is an external CSS file
  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(\"myscript.js\",\"js\") //dynamically load and add this .js file
loadjscssfile(\"javascript.php\",\"js\") //dynamically load \"javascript.php\" as a JavaScript file
loadjscssfile(\"mystyle.css\",\"css\") ////dynamically load and add this .css file