动态加载 CSS 文件

类似于动态加载 JS 文件的情形，动态加载 CSS 文件也是可以的，例如：

var loadStyles = function(url) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = url;
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
};

如果需要判断何时 CSS 文件已经载入完毕，则需要用到 onload 事件，但是，这个事件不是所有浏览器都支持。具体来说，IE 和 Opera 很早就支持这个事件，而 Firefox 从 9.0 版本开始支持这个事件。至于基于 WebKit 核心的 Chrome 和 Safari 浏览器，很快也会支持这个事件的（Chrome 是从 19.0 版本开始，而 Safari 尚且未知），因为在 WebKit 中这个功能已经实现了。

如果需要动态改变 CSS 文件，例如实现网页的换肤功能，则需要稍微修改代码。假定不同的皮肤对应不同的 css 文件，可以用下面的代码：

var loadStyles = function(url, id) {
  if (id) {
    var link = document.getElementById(id);
    if (link) {
      link.href = url;
      return;
    }
  }
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  if (id) link.id = id;
  link.href = url;
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
};

// use skin1
loadStyles("skin1.css", "skin-id");
// change to skin2
loadStyles("skin2.css", "skin-id");

如果 CSS 文件名没有变化，但内容改变了，需要重新载入。则可以修改文件路径的查询字符串，以迫使浏览器重新载入。代码如下：

var reloadStyles = function(id) {
  var link = document.getElementById(id); 
  var query = "?reload=" + new Date().getTime();
  link.href = link.href.replace(/\?.*|$/, query);
};

参考资料：
[1] javascript创建css、js，onload触发callback兼容主流浏览器的实现
[2] Faking Onload for Link Elements
[3] link - Mozilla Developer Network
[4] Bug 38995: style element and link element for CSS stylesheet
[5] How to prevent race conditions when loading CSS
[6] 如何动态加载 JavaScript 与 CSS
[7] Loading CSS with Javascript – and getting an onload callback
[8] CSS auto-reload
[9] Is there an easy way to reload css without reloading the page?