CSS的条件包含，但不作为最后一个(或第一个）CSS

Conditional include of CSS, but not as last (or first) CSS

本文关键字：CSS 第一个 最后一个 条件 包含 不作为      更新时间：2023-09-26

此问题有条件地添加一个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之前

有两个选项可供选择：

  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，然后使用其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">

因为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>
相关文章：