切换到备用样式表时如何防止出现主样式表？

Question

我的 header.php 中按此顺序提到了两个样式表：

<link rel="stylesheet" type="text/css" title="day" href="<?php echo $_layoutParams['root_css']; ?>day.css">
<link rel="stylesheet" type="text/css" title="night" href="<?php echo $_layoutParams['root_css']; ?>night.css">

我的导航栏中还有两个按钮，一个用于白天，一个用于夜晚。 每一个都触发相同的功能，但参数不同：

<a onclick="switch_style('day')..."
<a onclick="switch_style('night')..."

最后，我有一些 javascript 可以根据按下的按钮在两个样式表之间交替，并将 cookie 设置为 30 天和 未设置 cookie 时，样式默认为 day.css 文件。 加载 DOM 后，我还会在每个页面顶部触发 switch_style 函数。

为了清楚起见，补充2点。 用于在样式表之间交替的 JS：

function switch_style ( css_title )
{
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration, style_domain );
  }
}

我在每个页面顶部触发的 JS 如下所示：

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    set_style_from_cookie();  
});
</script>

All works pretty well, but: When 'day' is selected, the transitioning between light pages is seamless.但是当“夜间”被激活时，每个新的黑暗点击页面都会在几分之一秒内加载 day.css，然后才会被漆成黑暗（闪烁），从长远来看，这真的让我很头疼。

当我像这样颠倒样式表的顺序时：

<link rel="stylesheet" type="text/css" title="night" href="<?php echo $_layoutParams['root_css']; ?>night.css">
<link rel="stylesheet" type="text/css" title="day" href="<?php echo $_layoutParams['root_css']; ?>day.css">

然后我遇到了逆问题，这意味着深色页面之间的过渡是无缝的。但是当“day”被激活时，每个新的灯光点击页面都会加载 night.css 几分之一秒，然后才会被绘制为灯光。

知道如何解决这个问题吗？

Answer 1

您可以通过这种方式使用 Jquery 禁用/启用 CSS 文件：

$('link[href="mystyle.css"]').prop('disabled', true);
$('link[href="mystyle.css"]').prop('disabled', false);