既存のCSSリンクの前に頭にCSSリンクを挿入する

Question

リンクタグを使用して頭にいくつかのCSSを挿入したいと思います。私はそれが優先する必要があるとして、別の既存のリンクタグが頭の中で最後の項目も持っていると思いますが、これは

var linkNode = document.createElement('link'); 
linkNode.href = '"+ jqueryTablesorterCSS_URL +"'; 
linkNode.type = 'text/css'; 
linkNode.rel = 'stylesheet'; 
documentHead.appendChild(linkNode); 

使用してかなり簡単に仕事を得ることができます。私はこの他のリンクタグを制御することはできず、すでにページに存在しています。

このように見つけて他の要素を移動することは機能していないようです。

var documentHead = document.head; 
var customCSSNode = documentHead.querySelector("link[href$='custom.css']"); 
documentHead.appendChild(customCSSNode); 

Answer 1

私はそれをテストしたときに動作するように思われますが、これは「間違っている」と思われるため、私はあなたが新しいCSSのロードイベントを待つならば、あなたがappendChildを使って "頭"にそれを追加することで既存のものをリロードすることができると思います。

このサンドボックスでは "ヘッド"は実際に "ボディ"です。

2つのcssファイルの順序を手動で再生することはできますが、中央/右側にバラのある分割された背景が表示されている場合は、適切な効果が適用されます。

ローズが左側にある場合、またはバックグラウンドがローズでない場合は失敗しています。

デモをフルスクリーンで開く必要がある場合があります。申し訳ありませんが、これらは2つのCSSファイルを簡単につかんで、後で複製しようとしました。サイドノートとして

var documentHead = document.body; 
 
var existingNode = document.getElementById("existing"); 
 

 
var linkNode = document.createElement('link'); 
 
linkNode.type = "text/css"; 
 
linkNode.rel = "stylesheet"; 
 
linkNode.onload = function(){ documentHead.appendChild(existingNode); } 
 
linkNode.href = "http://www.csszengarden.com/220/220.css"; 
 
documentHead.appendChild(linkNode);

<link id="existing" rel="stylesheet" type="text/css" href="http://www.csszengarden.com/120/120.css" /> 
 

 
<div>Success if background pink rose in center</div> 
 
<div>Fail if background pink rose on left</div> 
 
<div>fail if kind of blue hand print</div>