开关样式表闪烁

Question

我有一个网站有2个样式表，一个白天和一个夜间阅读。我有一个onclick事件的图像来调用一个函数来更改样式表。问题是，对于新来的访问者，当他们第一次点击按钮时，页面会变成完全没有样式的（即没有样式表），只需半秒钟，然后新的访问者就会进入。我知道这是发生的原因是我删除在将其添加到新的之前，将当前工作表的rel="stylesheet"。有什么方法可以改进功能，即使对于新的访客也不会有短暂的延迟？谢谢。

function changeStyleSheet() { 
    var a = document.getElementById('stylesheet1'); 
    var b = document.getElementById('stylesheet2'); 
    var now1 = $(a).attr('rel'); 
    var now2 = $(b).attr('rel'); 
    if (now1 == 'stylesheet') { 
     a.setAttribute('rel', 'alt-stylesheet'); 
     b.setAttribute('rel', 'stylesheet'); 
    } else { 
     b.setAttribute('rel', 'alt-stylesheet'); 
     a.setAttribute('rel', 'stylesheet'); 
    } 
}; 

Answer 1

您是否尝试切换设置属性的顺序？像设置你要切换到的样式表的rel属性，然后设置你要切换的样式表的rel属性？

将两个rel属性都设置为HTML中的样式表，并在页面加载时使用javascript将其中一个更改为其他样式表。

Answer 2

为什么没有沿着这些路线的东西一个：

的JavaScript

function changeStyle() { 
    document.getElementById('stylesheet').href = 'style2.css'; 
} 

HTML

<input type="button" onclick="changeStyle();"/> 
<link rel="stylesheet" href="style1.css" id="stylesheet"> 

或尝试this多个样式表

来回切换试试这个：

function changeStyle() { 
    var a = document.getElementById('stylesheet').href; 
    if (a === 'style1.css') { 
     document.getElementById('stylesheet').href = 'style2.css'; 
    } else { 
     document.getElementById('stylesheet').href = 'style1.css';   
    } 
}​ 

Answer 3

除非你的两个样式有一个非常相似的结构，你要与一个奇怪的闪烁落得/渲染反正：

变化

订单（你希望）：

• 片1 - 施加
• 片2 - 施加
• 片1 - 除去

这意味着，对于一个BR第二，你会同时应用两种样式表（如果他们只是设置一个调色板，并且所有元素都在相同的元素上，则不是问题，但如果更冗长/重要，则会出现问题）。

如果这是一个问题，你可能会考虑做一些事情，使样式表的变化看起来真棒 - 就像淡出页/样式更改之前的元素，改变样式，然后渐退在

如果它不是一个问题，你应该能够使用由jacktheripper

Answer 4

提供的方法，如果你不保持两个独立的样式表要求，那么它可能会更容易通过简单地施加id为实现你的目标在body内的父元素。在我的演示中，为简单起见，我使用了body元素，但如果这不可行，则可以简单地将网站内容包装在div中，然后添加id。然后，只需将相应的id的CSS选择器应用于相关样式即可。

在我的演示中，我使用下面的JavaScript：

var sel = document.getElementById('styles'), 
    b = document.getElementsByTagName('body')[0]; 
sel.onchange = function() { 
    b.id = this.value; 
};​ 

和CSS：

#styles1 h1 { 
    margin-top: 1em; 
    color: #f00; 
    background-color: #000; 
    text-align: center; 
    font-size: 2em; 
} 

#styles1 div { 
    width: 80%; 
} 

#styles2 h1 { 
    margin-top: 1em; 
    color: #000; 
    background-color: #fff; 
    text-align: right; 
    font-size: 1.5em; 
    font-style: italic; 
} 

#styles2 div { 
    width: 50%; 
    margin: 0 auto 1em auto; 
} 

/* the following is for the element holding the style-switcher select */ 
#styles1 #themes, 
#styles2 #themes { 
    width: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #fff; 
}​ 

JS Fiddle demo。

通过上面的介绍，当样式发生变化时，您不应该注意到任何闪烁，因为样式表已经被加载。如果页面特别复杂，可能会出现可见的闪烁，但它应该比使用切换到新样式表的闪烁短得多。