Jquery将css添加到头部答案

【问题标题】：Jquery add css to headJquery将css添加到头部
【发布时间】：2012-08-19 01:55:04
【问题描述】：

我正在将一些脚本和样式表异步添加到我正在构建的项目中，并希望将样式表全部组合在 HEAD 中。

<head>
  <title>home</title>
  <meta charset="utf-8">
  <link rel="Shortcut Icon" type="image/ico" href="/img/favicon.png">

  <!-- STYLES-->
  <link rel="stylesheet" href="/css/fonts-and-colors.css" type="text/css" media="screen"> 
  <link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen">

  <!-- JS-->
  <script type="text/javascript" async="" src="/js/light-box.js"></script>
  <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/js/grade-button.js"></script>
  <script>
    $(document).ready(function() {
        // some code
    });
  </script>
  <link rel="stylesheet" href="/css/masterBlaster.css" type="text/css" media="screen">
</head>

我正在使用

$("head").append("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

效果很好，但它会将其添加到我的 HEAD 部分的底部，如您在示例中所见。

我的强迫症想在我的第一个样式链接之前或最后一个样式链接之后添加它。

感谢收看。

【问题讨论】：

标签： jquery css asynchronous head

【解决方案1】：

这会将新的link 放置在您的head 元素中的最后一个link 之后。

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

但是，如果您还没有 link，则不会添加新的 link。因此，您应该先进行检查：

var $head = $("head");
var $headlinklast = $head.find("link[rel='stylesheet']:last");
var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>";
if ($headlinklast.length){
   $headlinklast.after(linkElement);
}
else {
   $head.append(linkElement);
}

我的强迫症想在我的第一个样式链接之前添加它或在最后一个样式链接之后。

您应该确定link 的确切放置位置。不同的位置可能会覆盖现有样式。

【讨论】：

好答案，看起来我们同时回答了。但是，这会将它插入到头部中任何链接元素的最后一个之后，而不仅仅是请求的最后一个样式表链接。
@blesh 干杯，同样你的回答没有考虑如果没有 link 元素会发生什么。
嗯，然后我将删除我的答案并删除我的反对票。不过，我会修复一些关于您的问题...我会在单独的变量中创建
另外，+1 以获得最完整的答案。
您的解决方案效果很好。我对其进行了一些修改，以将链接添加到样式块 $headlink.first().before(); 的开头。谢谢。

【解决方案2】：

你可以使用：

.prepend()

http://api.jquery.com/prepend/

【讨论】：