爲整個網站動態更新CSS類

我有一系列書籍的參考網站，我想這樣做，以便讀者可以避免破壞者。我的想法是創建一個設置網頁，在那裏他們點擊他們想要查看信息的每本書的複選框。然後，我可以將它（以某種方式）作爲每次訪問該網站時的cookie進行存儲，並且可以在網站中的每個頁面上都有效。因此，一個頁面可能有這樣的：爲整個網站動態更新CSS類

<li class="teotw">Rand killed a Trolloc</li>

和另一頁可能有

<li class="teotw">Nynaeve tugged her braid</li>

和信息不會在頁面上顯示出來，除非他們已經檢查了「teotw」一書的箱子。我最初的想法是做這樣的事情切換這樣的CSS類值：

document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:none'; 
document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:inherit';

，但我不知道這是否是最好的方法。首先，它僅適用於當前文檔，所以我需要一種方法將其重新應用到他們訪問的每個頁面。如果它很重要，我也使用YUI。這樣做的最佳方式的任何想法？

來源

2012-12-29 Gary Kephart

有很多方法來實現它。您可以使用YUI樣式表模塊（請閱讀其User Guide以瞭解如何使用它），它將完成您在跨瀏覽器支持時所考慮的內容，並且比直接使用DOM更容易使用。

另一種方法是將類添加到頁面的body。您可以定義樣式像這樣：

.teotw { 
    display: none; 
} 
.teotw-visible .teotw { 
    display: block; 
}

用下面的JS代碼：

if (someCondition) { 
    // show the hidden content 
    Y.one('body').addClass('teotw-visible'); 
}

對於您可以使用Cookie與YUI Cookie utilty或本地存儲與CacheOffline可見狀態的持久性。使用cookie的代碼如下所示：

var body = Y.one('body'); 
if (Y.Cookie.get('teotwVisible')) { 
    body.addClass('teotw-visible'); 
} 
// change the cookie 
Y.one('#teotw-toggle').on('click', function (e) { 
    var checked = this.get('checked'); 
    Y.Cookie.set('teotwVisible', checked); 
    body.toggleClass('teotw-visible', checked); 
});

您應該將不同的部分存儲在JS對象中，並避免在每個JS行中對類名進行硬編碼。或者可以在複選框ID和部分類名稱之間使用約定。

來源

2012-12-29 01:24:30 juandopazo

謝謝！我不熟悉樣式表模塊或Cookie實用程序，所以我必須深入研究。 –

如果有人關心我的實施情況，請訪問http://encyclopaedia-wot.org/2/ 「設置」選項卡用於隱藏/查看內容。然後轉到http://encyclopaedia-wot.org/2/teotwch15.html這樣的頁面查看結果。 –

爲整個網站動態更新CSS類

回答

相關問題