在 IE8 中使用 JavaScript 将 CSS 附加到正文时出现未知的运行时错误答案

【问题标题】：Unknown Runtime Error when using JavaScript to append CSS to Body in IE8在 IE8 中使用 JavaScript 将 CSS 附加到正文时出现未知的运行时错误
【发布时间】：2015-07-05 23:49:30
【问题描述】：

我在 Internet Explorer 8 中将 CSS @import 规则插入我的 <body> 时遇到问题。我这样做是为了推迟非关键 CSS。

当我运行以下代码时，我在第 6 行 (ref_obj.innerHTML = ...) 收到“未知运行时错误”：

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");

ref_obj.type = "text/css";
ref_obj.innerHTML = "@import url(\""+css_path_1_str+"\");";

el_body.appendChild(ref_obj);

您可能已经猜到，该代码在 Chrome 和 Firefox 上运行没有任何问题。

在 SO 上进行搜索后，我偶然发现了这篇文章 - Why is document.getElementById('tableId').innerHTML not working in IE8? - 它说 IE 上的 innerHTML for STYLE [和其他一些元素] 是只读的。

有什么想法可以编辑我的代码来解决这些限制吗？

注意：仅限纯原生 JavaScript。

编辑：

问题已解决，但为了完整起见，这里是应该工作的代码（跨浏览器）。

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");
ref_obj.type = "text/css";

el_body.appendChild(ref_obj);

if(ref_obj.styleSheet)
{
    //IE
    ref_obj.styleSheet.cssText = "@import url(\""+css_path_str+"\");";
}
else
{
    //Other Browsers
    var ref_obj_text_node_obj = document.createTextNode("@import url(\""+css_path_str+"\");");
    ref_obj.appendChild(ref_obj_text_node_obj);
}

【问题讨论】：

我认为可以用innerText设置<style>元素的内容；有一些像这样的仅限 IE 的属性。
您是否尝试过使用link（href 链接属性）而不是style？（添加到head）
innerHTML 标签没有 innerHTML 属性。您可以创建一个 textNode 并附加到它。
@marekful ... 除了innerHTML 可以在其他浏览器中使用。
@GabyakaG.Petrioli 啊好吧，我明白你的意思了。是的，这可能有效（尽管我们在这里谈论的是 IE8，所以谁知道）。

标签： javascript internet-explorer-8

【解决方案1】：

在将节点插入 DOM 后，您可以使用节点的 styleSheet.cssText 属性来让 IE 满意：

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");
ref_obj.type = "text/css";

el_body.appendChild(ref_obj);
ref_obj.styleSheet.cssText = "@import url(\""+css_path_str+"\");";

【讨论】：

嗯...它说“styleSheet 为空或不是对象”。
另外，如果我不删除ref_obj.type = "text/css";，IE 会崩溃。多么奇怪的浏览器。
@ObinwanneHill 这很奇怪，但无论如何都不需要 type 属性；浏览器总是将 <style> 元素解释为 CSS。我知道.styleSheet.cssText 的东西有效。也许您必须先将元素添加到 DOM 中？（在我的代码中，<style> 元素已经在 DOM 中。我不知道为什么这很重要，但它是 IE。）
你说的很对。显然，在使用.styleSheet.cssText 之前，我必须将<style> 元素附加到DOM。做到了，它的工作原理。我在 DOM 检查器中看不到 @import，但我在 CSS 文件中有一条规则可以修改页面上的 div，这是我知道它正在工作的唯一方法。将编辑您的答案并接受。
用我原来的 sn-p 编辑了你的答案。希望你不介意？