javascript - 有条件地包含 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，你仍然可以这样做:你可以通过querySelector找到添加highlight.css的link使用 attribute-ends-with selector , 然后使用它的 parentNode和 parent 的 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">