CSS 的条件包含，但不是最后一个（或第一个）CSS

Question

This question 有条件地添加一个 CSS 作为最后一个 CSS 链接（有效地覆盖所有其他链接），使用以下 javascript：

<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
    var lnk = document.createElement('link');
    lnk.type='text/css';
    lnk.href='website/reveal/css/print/pdf.css';
    lnk.rel='stylesheet';
    document.getElementsByTagName('head')[0].appendChild(lnk);
}
</script>
<link rel="stylesheet" href="website/highlight/highlight.css">
<link rel="stylesheet" href="website/optaplannerPresentation.css">

问题是：它将它添加为最后一个 CSS 链接，覆盖后面的 2 个 CSS 文件（包括 highlight.css）。 有没有办法在simple.css 之后，highlight.css 之前添加它？

Answer 1

两种选择：

1. 如果您正在测试的条件是使用立即可用的信息，并且您的脚本元素不使用async 或defer，这可能是document.write 是合理选择的少数情况之一：

   <link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="website/reveal/css/reveal.min.css">
   <link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
   <!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
   <script type="text/javascript">
   if (...) {
       document.write('<link type="text/css" rel="stylesheet" href="website/reveal/css/print/pdf.css">');
   }
   </script>
   <link rel="stylesheet" href="website/highlight/highlight.css">
   <link rel="stylesheet" href="website/optaplannerPresentation.css">
   

2. 如果您使用的是 async / defer 脚本，或者内联不可用的信息，或者您只是不想使用 document.write，您仍然可以这样做：您可以找到link 通过querySelector 使用attribute-ends-with selector 添加highlight.css，然后使用其parentNode 和父级的insertBefore 在其前面插入新的link。

   var lnk = document.createElement('link');
   lnk.type='text/css';
   lnk.href='website/reveal/css/print/pdf.css';
   lnk.rel='stylesheet';
   var highlight = document.querySelector('link[href$="highlight.css"]');
   highlight.parentNode.insertBefore(lnk, highlight);
   

   querySelector 适用于所有现代浏览器，也适用于 IE8。它返回与您提供的 CSS 选择器匹配的第一个元素。 （还有querySelectorAll，它返回所有匹配元素的列表。）

   不过，要做到这一点，您的代码必须在highlight.css 的link 之后（除非它正在运行async 或在某些事件处理程序中）：

   <link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="website/reveal/css/reveal.min.css">
   <link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
   <link rel="stylesheet" href="website/highlight/highlight.css">
   <!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
   <script type="text/javascript">
   if (...) {
       var lnk = document.createElement('link');
       lnk.type='text/css';
       lnk.href='website/reveal/css/print/pdf.css';
       lnk.rel='stylesheet';
       var highlight = document.querySelector('link[href$="highlight.css"]');
       highlight.parentNode.insertBefore(lnk, highlight);
   }
   </script>
   <link rel="stylesheet" href="website/optaplannerPresentation.css">
   

Answer 2

因为JavaScript不执行页面渲染，所以需要添加一个占位符，然后替换：

function changeCSS(cssFile) {
    document.getElementById('stylesheetReplace').href='cssFile';
}

和 css 的占位符：

<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="" id="stylesheetReplace>