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可以根据所按下的哪个按钮在两个样式表之间交替显示，并设置30天的Cookie和如果未设置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”时，浅页之间的转换是无缝的。但是，当“夜间”被激活时，每个新的深色页面都会加载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);

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

1 个答案: