动态加载 css 样式表在 IE 上不起作用

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

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

这在 Firefox 和 Google Chrome 中很好用，但是在 IE 中却是 没有。

有人帮忙吗？ 谢谢

35394 次浏览
小开
最佳答案

一旦 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');
}
小开

这似乎也适用于 IE:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);
小开

您需要将 href attr 设置为最后并且仅在将 link 元素添加到头部之后:

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

更新

现在 IE 和 Edge 的唯一目的就是下载 Chrome，所以我建议不要用自定义的 IE 或 Edge 支持来膨胀你的代码，而只是忽略它们的存在。

小开

这可能也与此有关——摘自 Microsoft 支持文章:

当页面载入 Internet Explorer 版本时，页面上的样式会丢失或看起来不正确 ...

出现这个问题是因为 以下条件适用于 Internet Explorer

  • 所有款式标签 在前31个样式标签之后就不是了 应用

  • 后的所有样式规则 前4,095条规则不适用

  • 开始 使用@import 规则来 不断引进外部样式 导入其他样式表的工作表, 多于三个的样式表 深层被忽略

小开

看起来

$('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head');

只要 URL 是一个完全合格的 URI，包括协议，也可以在 IE 中工作。

小开

在不打开调试器的情况下打开 ie8。当您到达动态样式表之后... ... 打开调试器，瞧，它们应该就在那里了。


提交答案