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

73

我动态加载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中则不能。

有什么帮助吗？谢谢

— 开心果
source

stackoverflow.com/questions/524696/…的

— dude 2015年

119

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'); 
}

— 雷克斯M
source

1

document.createStyleSheet的文档：ssicom.org/js/x276572.htm（MSDN文章失败，出现503错误...）。请注意，返回的对象是DispHtmlStyleSheet对象，而不是LINK元素。要从此对象获取链接标记，您需要访问document.createStyleSheet（'...'）。owningElement

— Chris Moschini

我相信动态创建一个新样式标签 <style>your style here</style>并将其添加到<head>中也可以在IE中使用。

— Pacerier

3

更新09/2013：不再支持createStyleSheet方法。有关更多信息，请访问：msdn.microsoft.com/en-us/library/ie/ms531194%28v=vs.85%29.aspx

— pablofiumara 2013年

我下面的解决方案不同意，

— ekerner

我在下面尝试了@ekerner的解决方案，但这是唯一在IE9（模拟模式）下工作的解决方案。

— contactmatt

40

仅在链接元素附加到头部之后，才需要最后设置href属性：

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

更新资料

如今，IE和Edge的唯一目的是下载Chrome，所以我建议不要使用对IE或Edge的自定义支持来膨胀代码，而不要理会它们的存在。

— 埃克纳
source

9

这是一个值得注意的重要Internet Explorer怪癖（即使在最近的IE 8中也是如此），对于我正在从事的项目来说绝对至关重要。感谢您在这里注意。人们何时会停止使用IE？

— 杰伊·丹桑

2

与仅使用IE的“ document.createStyleSheet”方法相比，我更喜欢这种方法。

— 格雷厄姆

1

在IE8兼容模式下的IE9上，这确实对我有用，但在纯/真实IE8上却失败了。在真正的IE8上，仅“ document.createStyleSheet”方法对我而言是可靠的。只是让别人知道谁遇到同样的问题。

— 2012年

1

为了使它能够在我来自modern.ie的实际IE8 win7 VM上运行，我必须在引号中加上属性名称：“ type”和“ rel” ...

— Pierre Henry

1

在IE9中对此进行了测试，它解决了我遇到的样式表注入问题！真的很感激！

— 马克·福勒

3

这似乎在IE中也有效：

var link = document.createElement（'link'）;
link.rel ='样式表';
link.type ='text / css';
link.href ='/includes/style.css';
document.getElementsByTagName（'head'）[0] .appendChild（link）;

— 曼利
source

2

这也可能与它有关-摘自Microsoft支持文章：

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

...发生此问题的原因是在Internet Explorer中满足以下条件：

不应用前31个样式标签之后的所有样式标签。

前4095个规则之后的所有样式规则均未应用。

在使用@import规则连续导入外部样式表并导入其他样式表的页面上，超过三层的样式表将被忽略。

— 尿
source

1

看起来

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

只要url是包含协议的标准URI，它在IE中也可以使用...

— campino2k
source

0

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

— 奥利弗·福斯特
source