Question

我正在异步地为我正在构建的项目添加一些脚本和样式表，并希望将样式表全部组合在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部分的底部，如示例中所示。

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

感谢您的光临。

Answer 1

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

$("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);
}

我的OCD想要在我的第一个样式链接之前添加它或者在最后一个样式链接之后。

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

Answer 2

你可以使用：

.prepend（）

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

Jquery将css添加到头部

2 个答案: