javascript - 如何使用 javascript 更改 .css 优先级

Question

我需要使用 javascript 更改加载的 .css 文件的优先级。我发现我可以通过替换 head 元素中 < link rel="stylesheet"... > 标签的位置来做到这一点。此解决方案适用于除 IE 以外的所有浏览器。我为此使用以下代码:

var firstCss =  styleSheets[0].ownerNode;
var defaultCss =  styleSheets[1].ownerNode;
firstCss.parentNode.insertBefore(defaultCss, firstCss);

那么对于这样的问题有没有更好的解决方案，或者也许有人知道如何让这段代码在 IE 下工作。

Answer 1

我解决问题的方式可能不是最好的，但它确实有效。我写了下面的代码:

if (document.createStyleSheet) {
  document.createStyleSheet(defaultCss.href,0);
  defaultCss.cssText = "";
} else {
  firstCss.ownerNode.parentNode.insertBefore(defaultCss.ownerNode, firstCss.ownerNode);
}

我使用“defaultCss.cssText = “”;”清理旧的CSS文件，因为你不能在IE7-8下获取styleSheet的ownerNode(但你可以在IE9中获取)并删除旧的样式表。因此，即使您将 CSS 文件加载到第一个位置，您在最后一个位置仍然会有相同的位置，并且它会被优先考虑。我检查它在 IE 7 - 9 和其他浏览器下工作，样式表也不会再次从服务器加载，IE 从缓存中获取它。希望它对某人有用。