0

我正在使用 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 中添加样式表是因为当文档模式为 < IE9 时我需要添加不同的样式表：

<!--[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]-->
4

2 回答 2

2

我以前遇到过这个问题，并记得使用 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）

于 2013-09-30T22:03:52.250 回答
0

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

于 2013-09-30T23:19:25.383 回答