Question

我正在使用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中添加样式表，因为当文档模式为＆lt;时，我需要添加不同的样式表。 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]-->

Answer 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）

Answer 2

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

动态添加的样式表标记在IE下不起作用

2 个答案: