IE下动态添加的样式表标记不生效答案

【问题标题】：Dynamically-added stylesheet markup does not take effect under IEIE下动态添加的样式表标记不生效
【发布时间】：2013-09-30 21:39:34
【问题描述】：

我正在使用 JavaScript 向页面动态添加样式表：

document.getElementsByTagName('head')[0].innerHTML += '<link href="/assets/standards/global.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/standards/header.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/standards/footer.css?body=1" media="screen" rel="stylesheet" type="text/css" />';

在 Chrome 下，一切都以适当的样式呈现；在 IE8 和 IE9 下，一切都呈现没有样式。任何想法为什么？

（注意：在我的情况下，不能通过 document.createElement + head.appendChild 注入样式表，因此这不是解决方案。另外请注意：在这种情况下我也不能使用 jQuery。）

背景：我在 JavaScript 中添加样式表，因为当文档模式为

<!--[if gt IE 8]>
    <%= javascript_tag do %>
        if (document.documentMode < 9) {
            // Browser Mode = IE9+, Document Mode = IE8-.
            document.getElementsByTagName('head')[0].innerHTML += '<%= stylesheet_link_tag("ie8").gsub("\n", '').html_safe %>';
        }
        else {
            // Browser Mode = IE9+, Document Mode = IE9+.
            document.getElementsByTagName('head')[0].innerHTML += '<%= stylesheet_link_tag("core", "widgets").gsub("\n", '').html_safe %>';
        }
    <% end %>
<![endif]-->

【问题讨论】：

你可以使用 DOM 属性，但不能使用 DOM 方法？怎么会？
我无法使用 document.createElement，因为我的后端正在发送生成的 <link> 标签标记。后端没有返回样式表 URL 数组（这很好，但这是约束）。
如果链接是在后端形成的-不能在后端添加到页面吗？您有什么理由需要在客户端执行此操作？
如果文档模式

标签： javascript html css internet-explorer

【解决方案1】：

我以前也遇到过这个问题，记得改用 document.createStyleSheet：

document.createStyleSheet('mycssfile.css");

这是一个仅限 IE 的功能，因此您可以更安全地使用这样的回退：

if(typeof document.createStyleSheet == 'function') {
  document.createStyleSheet('mycssfile.css');
} else {
  //your document.getElementsByTagName('head')[0].innerHTML or some jQuery/favourite framework equivalent
}

这个函数的一个警告是它在 IE11 中被弃用了。 (http://msdn.microsoft.com/en-us/library/ie/ms531194(v=vs.85).aspx)

【讨论】：

是的，我也在stackoverflow.com/a/1184960/83897 找到了该解决方案...尝试一下。糟糕的是，这是唯一有效的解决方案，MS 将弃用它。
我相信较新的 IE 浏览器可以像 Chrome 和 Firefox 一样将样式表直接添加到 DOM。我认为这就是他们弃用它的原因。我最好的猜测是旧的 IE 浏览器有一些内部限制，需要使用这种方法。

【解决方案2】：

innerHTML 添加文本但不加载 url。您可以创建一个新的链接元素，附加一个 src 属性，然后在任何使用 dom 的浏览器中使用 dom 方法将其附加到文档头，回到 IE 6。

【讨论】：