開關樣式表閃爍

我有一個網站有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'); 
    } 
};

來源

2012-04-14 preahkumpii

您是否嘗試切換設置屬性的順序？像設置你要切換到的樣式表的rel屬性，然後設置你要切換的樣式表的rel屬性？

將兩個rel屬性都設置爲HTML中的樣式表，並在頁面加載時使用javascript將其中一個更改爲其他樣式表。

來源

2012-04-14 15:58:13

不，我沒有...讓我試試。我並沒有，因爲我認爲我不能一次將'rel =「stylesheet」'設置爲兩個元素。 – preahkumpii 2012-04-14 16:02:06

沒有什麼區別。它_seems_瀏覽器正在加載第二個樣式表或類似的東西。因爲當我切換紙張後，它不再閃爍。 – preahkumpii 2012-04-14 16:06:17

那麼如何預加載樣式表。將兩個rel屬性都設置爲HTML中的樣式表，並在頁面加載時將其中的一個切換到另一個樣式表。 – 2012-04-14 16:08:56

爲什麼沒有沿着這些路線的東西一個：

的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';   
    } 
}

來源

2012-04-14 15:40:06 jacktheripper

看起來更容易。但是如何切換回來，如切換？ – preahkumpii 2012-04-14 15:42:05

把它包裝在一個if函數中，給我一秒 – jacktheripper 2012-04-14 15:42:59

已更新的答案。 – jacktheripper 2012-04-14 15:45:52

除非你的兩個樣式有一個非常相似的結構，你要與一個奇怪的閃爍落得/渲染反正：

變化

訂單（你希望）：

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

這意味着，對於一個BR第二，你會同時應用兩種樣式表（如果他們只是設置一個調色板，並且所有元素都在相同的元素上，則不是問題，但如果更冗長/重要，則會出現問題）。

如果這是一個問題，你可能會考慮做一些事情，使樣式表的變化看起來真棒 - 就像淡出頁/樣式更改之前的元素，改變樣式，然後漸退在

如果它不是一個問題，你應該能夠使用由jacktheripper

來源

2012-04-14 16:07:29 webnesto

提供的方法，如果你不保持兩個獨立的樣式表要求，那麼它可能會更容易通過簡單地施加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。

通過上面的介紹，當樣式發生變化時，您不應該注意到任何閃爍，因爲樣式表已經被加載。如果頁面特別複雜，可能會出現可見的閃爍，但它應該比使用切換到新樣式表的閃爍短得多。

來源

2012-04-14 16:44:35

開關樣式表閃爍

回答

相關問題