如何使用 jQuery 在 IE 中附加样式表？答案

【问题标题】：How to append Style Sheets in IE using jQuery?如何使用 jQuery 在 IE 中附加样式表？
【发布时间】：2011-08-30 02:21:28
【问题描述】：

大家好，

我只是想创建一个插件，我需要它是用户友好的，所以我想在加载我的插件时在用户页面的head 部分上append <link/> 标记。它适用于所有其他浏览器（不确定 IE9、IE7 和 IE6），但不适用于 IE8！我不知道我的插件有什么问题，所以我只是创建了一个示例页面并遇到了类似的问题！这是我的测试页 HTML+jQuery 代码 ------

<html>
       <head>
              <script src="../jquery-1.6.min.js"></script>
              <script>
                       $(document).ready(function () {
                          $(document.head).append('<link rel="stylesheet" type="text/css" href="style.css" />');
                       });
              </script>
       </head>
       <body>
              <h1>Text!</h1>
       </body>
</html>

这是我的 CSS 代码 -----

body {
 background:#ddd; 
}
h1 {
 color: #789; 
}

那么谁能告诉我哪里出错了，或者这是一生的问题？

提前致谢

在看到第一条评论并转到提供的链接后，我刚刚创建了这个示例代码，发现了一些惊人的东西！看看这个~~~

<html>
       <head>
              <script src="../jquery-1.6.min.js"></script>
              <script>
                       $(document).ready(function () {
                          if (document.getElementsByTagName('head')[0] === document.head) {
                           $("head").append('<link rel="stylesheet" type="text/css" href="style.css" />');
                          }else {
                           alert('This doesn\'t supports head appending!');
                          }
                       });
              </script>
       </head>
       <body>
              <h1>Text!</h1>
       </body>
</html>

在使用我的 IE8 浏览器执行此页面时，我收到以下消息：

This doesn't supports head appending!

嗯，我不知道我的浏览器出了什么问题，或者这是 IE8 的问题？

【问题讨论】：

欺骗：stackoverflow.com/questions/1184950/…

标签： javascript jquery html css internet-explorer

【解决方案1】：

if (document.createStyleSheet)
{
    document.createStyleSheet("style.css");
}
else
{
    $("head")
       .append('<link rel="stylesheet" type="text/css" href="style.css" />'); 
}

【讨论】：

谢谢哥们你的摇滚~这适用于世界上的每一个浏览器！再次感谢！
当尝试在 IE
我同意，这应该是 jquery 的一部分。
我被 IE9 中的 IE8 兼容模式确实允许您在头部插入链接，但真正的 IE8 没有。 “兼容性”就这么多！我同意，这应该在 jquery 中。

【解决方案2】：

您正在使用document.head 访问头部。 document.head 只是最近添加到 DOM，作为 HTML5 的一部分。因此，它并未得到普遍支持。

如果你想使用它，你应该在调用它之前add a shim：

document.head = document.head || document.getElementsByTagName('head')[0];

否则，您可以直接附加到 <head> 标记（推荐，因为这是使用 jQuery 语法糖的一半）：

$("head").append(...);

【讨论】：

我知道但它不起作用，请参阅我对我的问题的最新编辑。 IE8 不支持在head 部分添加标签！？
...您的警报仅证明 document.head 不受支持，正如我所说，并不是您不能通过 JavaScript 附加到头部。如果添加垫片，它应该可以工作。 document.getElementsByTagName('head')[0] 具有普遍支持。
那怎么在上面加上link标签呢？请帮帮我。
@Jack Billy：如果你对 vanilla JavaScript 没问题，我有一个代码 sn-p。但是我猜你知道怎么用js来做。
请提供您回答我的问题的所有内容~~ ace