动态加载css样式表不适用于IE

Question

我动态加载一个css样式表(从jQuery的一点帮助),如下所示:

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

这适用于Firefox和谷歌浏览器,但不适用于IE.

有帮助吗？谢谢

Answer 1

一旦IE处理了加载了页面的所有样式,添加另一个样式表的唯一可靠方法就是 document.createStyleSheet(url)

有关更多详细信息,请参阅有关createStyleSheet 的MSDN文章.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Answer 2

你需要设置最后的href attr,并且只有在链接元素附加到头部之后:

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');