Question

Hello Guys，

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

<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的错误？

Answer 1

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

Answer 2

您正在使用document.head来访问头部。 document.head只是DOM的最新成员，是HTML5的一部分。所以，它并没有得到普遍的支持。

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

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

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

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

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

2 个答案: