JqueryがheadにCSSを追加

私はビルド中のプロジェクトにいくつかのスクリプトとスタイルシートを非同期で追加しており、すべてのスタイルシートをHEADにまとめるようにしたいと考えています。JqueryがheadにCSSを追加

<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セクションの一番下に追加されます

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

を使用しています。

私のOCDは、最初のスタイルのリンクの前または最後のスタイルのリンクの後に追加します。

ありがとうございます。

出典

2012-08-23 Deac Karns

これは、head要素に最後にlinkの後に新しい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); 
}

私の中でOCDは私の最初のスタイルのリンク前、または最後のスタイルのリンクの後のいずれかにそれを追加したいと思います。

正確にlinkが配置される場所を決定する必要があります。異なる位置が既存のスタイルを上書きする可能性があります。

出典

2012-08-23 14:08:00 Curt

良い答え、私たちは同時に答えのように見えますが。ただし、要求された最後のスタイルシートリンクだけでなく、頭の中の最後のリンク要素の後に挿入されます。 –

@bleshもう一度 'link'要素がなければ何が起こるかをあなたの答えは考慮しません。 – Curt

Meh、私は私の答えを削除して、私のdownvoteを削除します。私はあなたのことについていくつか修正するつもりです...私は2回宣言されていないように別の変数に<リンク文字列を作成したいと思います。また、.last（）ではなく最後のセレクタを使用します。セレクタは、何の理由もない2つのメソッド呼び出しを作成するのではなく、私が望むものを正確に選択しています。 –

あなたが使用することができます。

.prepend（）

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

出典

2012-08-23 14:08:12

JqueryがheadにCSSを追加

答えて

関連する問題