在現有CSS鏈接之前將CSS鏈接注入頭部

我想使用鏈接標記將一些CSS注入頭部。我能得到這個很容易地使用工作在現有CSS鏈接之前將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);

來源

2016-07-01 Devon Holcombe

作爲一個方面說明，當你使用注射JS，其他人會已經被瀏覽器加載的，所以使得它之前不會改變任何東西。 – MoustafaS

也許你也可以通過將CSS/JS鏈接放入head部分並將其默認設置爲disabled並僅通過javascript處理啓用/禁用它來實現。 – denchu

這是正確的，我真的不關心順序，以及各種CSS文件的優先順序。通常這是由頁面加載時的順序控制的。追加新文件會導致它們加載並應用。如果您閱讀已經加載的CSS文件，這似乎不是真的。它不會重新應用。 –

我覺得有種粗暴的暗示，因爲它似乎「錯誤」，雖然也似乎工作時，當我測試它。我想如果你在新的CSS上等待加載事件，你可以重新加載現有的加入到「頭」與appendChild

注意在這個沙箱「頭」實際上是「身體」。

您可以手動播放兩個css文件的順序，但是我相信，當此結果顯示中間/右側有玫瑰的分割背景時，您所需的效果會得到正確應用。

如果玫瑰在左邊，或者如果背景不是玫瑰，那麼我失敗了。

您可能需要全屏顯示該演示。對不起，這些是兩個容易抓取的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>

來源

2016-07-01 02:55:57 JonSG

謝謝。這是我所希望的。不幸的是，它似乎並不奏效。 –

它似乎在沙箱中工作（至少對我而言）。你有兩個簡單的公共CSS文件，我們可以測試嗎？ – JonSG

在現有CSS鏈接之前將CSS鏈接注入頭部

回答

相關問題