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链接，覆盖后两个CSS文件（包括highlight.css）。 有没有办法在simple.css之后，highlight.css之前添加？

Answer 1

有两种选择：

如果您正在测试的条件是使用可立即获得的信息且您的脚本元素未使用async或defer，则可能是{{1}的极少数情况之一是一个合理的选择：
```
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">  <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"> / async脚本，或者内联无法提供的信息，或者您只是不想使用defer，那么仍可以执行此操作：您可以使用querySelector找到document.write通过attribute-ends-with selector添加link的{{1}}，然后使用其parentNode和父insertBefore在它前面插入新的highlight.css。
```
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);适用于所有现代浏览器，也适用于IE8。它返回与您提供的CSS选择器匹配的第一个元素。（还有querySelector，它返回所有匹配元素的列表。）

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

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>

条件包括CSS，但不是最后（或第一）CSS

2 个答案: