Jquery add css to head | 易学教程

问题

I am asynchronously adding a few scripts and style sheets to a project that I am building and would like to keep the style sheets all grouped together in the 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>

I am currently using

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

which works fine, but it adds it to the bottom of my HEAD section as you can see in the example.

The OCD in me would like to add it either before my first style link or after the last style link.

Thanks for looking.

回答1:

This will place the new link after the last link already in your head element.

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

However if you don't already have a link in place this won't add the new link. Therefore you should do a check first:

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);
}