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

我认为这似乎有点粗暴，因为它似乎＆＃34;错误＆＃34;虽然在我测试它时似乎也有效。我想如果你等待新css上的加载事件，你可以通过将它添加回＆＃34; head＆＃34;来重新加载现有的css。 with appendChild

请注意此沙箱＆＃34; head＆＃34;实际上是＆＃34; body＆＃34;。

你可以手动播放两个css文件的顺序，但我相信当这个结果显示中心/右边有一个玫瑰花的分割背景时，你想要的效果会被正确应用。

如果玫瑰在左边或者背景不是玫瑰，那么我就失败了。

您可能需要全屏打开演示。对不起，这些是两个容易抓取的CSS文件，试图复制你的内容。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在现有CSS链接之前将CSS链接注入头部

1 个答案: