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属性？

在HTML中将两个rel属性设置为样式表，并在页面加载时使用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

如果您不需要维护两个单独的样式表，那么只需将id应用于body中的父元素，就可以更轻松地实现目标。在我的演示中，为了简单起见，我使用了body元素，但如果不可能，您只需将网站内容包装在div中并添加id即可。然后，只需将CSS选择器与相关id作为前缀来应用相关样式。

在我的演示中，我使用以下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

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

Answer 4

除非你的两个样式表具有非常相似的结构，否则你最终会得到奇怪的闪烁/渲染：

变更顺序（你希望）：

表1 - 已应用
表2 - 已应用
表1 - 已删除

这意味着，短暂的一秒钟，你将同时应用两个样式表（如果它们只是设置一个调色板而且都是相同的元素，则不是问题，但如果更详细/更重要将会成为一个问题）。

如果这是一个问题，您可能会考虑做一些事情来使样式表更改看起来很棒 - 比如在样式更改之前淡出页面/元素，更改样式，然后淡入。

如果不是问题，您应该能够使用jacktheripper提供的方法

切换样式表闪烁

4 个答案: