web-dev-qa-db-fra.com

Jquery ajoute CSS à la tête

J'ajoute de manière asynchrone quelques scripts et feuilles de style à un projet que je suis en train de créer et je souhaite conserver les feuilles de style toutes regroupées dans la 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>

J'utilise actuellement

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

ce qui fonctionne bien, mais il l'ajoute au bas de ma section HEAD comme vous pouvez le voir dans l'exemple.

L'OCD en moi voudrait l'ajouter avant mon premier lien de style ou après le dernier lien de style.

Merci d'avoir regardé.

jquerycssasynchronoushead
17
Deac Karns

Cela placera le nouveau link après le dernier link déjà dans votre élément head.

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

Cependant, si vous n'avez pas déjà un link en place, cela n'ajoutera pas le nouveau link. Par conséquent, vous devez d'abord vérifier:

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

L'OCD en moi voudrait l'ajouter avant mon premier lien de style ou après le dernier lien de style.

Vous devez décider où exactement le link va être placé. Il est possible qu'une position différente remplace les styles existants.

36
Curt

vous pouvez utiliser:

.prepend ()

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

6
Andrea Turri