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

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>

所有人都效果很好，但是:选择“天”时，光页之间的过渡是无缝的。但是当“夜间”被激活时，每个新的黑暗点击页面加载 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">

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

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

Answer 1

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

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