4

我有一个包含 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');
    }
};
4

4 回答 4

4

您是否尝试过切换设置属性的顺序?就像先设置要切换到的样式表的 rel 属性,然后再设置要切换的样式表的 rel 属性?

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

于 2012-04-14T15:58:13.687 回答
1

为什么不按照这些思路做一些事情:

JavaScript

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

HTML

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

或者为多个样式表尝试这个

对于切换试试这个:

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';        
    }
}​
于 2012-04-14T15:40:06.300 回答
1

如果您不需要维护两个单独的样式表,那么通过简单地将 应用idbody. 在我的演示中,为了简单起见,我使用了该body元素,但如果这不可能,您可以简单地将站点的内容包装在 a 中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 小提琴演示

使用上述内容,当样式更改时,您应该不会注意到任何闪烁,因为样式表已经加载。如果您的页面特别复杂,可能会出现可见的闪烁,但它应该比切换到新样式表时的闪烁要短得多。

于 2012-04-14T16:44:35.117 回答
0

除非您的两个样式表具有非常相似的结构,否则无论如何您最终都会出现奇怪的闪烁/渲染:

更改顺序(您希望):

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

这意味着在短时间内,您将同时应用两个样式表(如果它们都只是设置调色板并且都在相同的元素上,这不是问题,但如果更冗长/重要则将是一个问题)。

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

如果不担心,您应该可以使用 jacktheripper 提供的方法

于 2012-04-14T16:07:29.913 回答