我期望切換元素的可見性：我應該從class =「...」還是style =「...」開始？

如果我在網頁上有一個元素，我希望能夠使用javascript顯示並隱藏很多內容，這將是最適合將其設置爲最初不可見的方式？我期望切換元素的可見性：我應該從class =「...」還是style =「...」開始？

<div class="hidden">...</div>

或

<div style="display: none;">...</div>

使用class="..."在大多數情況下最好style="..."，但我不相信這是在這種情況下最適合的。在語義上，我的元素不是一個隱藏的元素，它只是一個開始頁面第一次加載時隱藏。由於我使用jQuery的顯示（）和隱藏（）方法，這意味着它會經常處於這種狀態：

<div class="hidden" style="display: block;">...</div>

..這對我來說顯然是無稽之談。

另一方面，使用內嵌style="display: none;"感覺不知何故是硬編碼和硬編碼。

我知道任何一種方法都可以很好地工作，而且用戶永遠不會明智，但哪種模式最少違反設計原則？

來源

2009-10-30 teedyay

使用JS fw。原型div.hide（）; div.show（）; – erenon 2009-10-30 15:35:23

嗯......我可以使用div.hide（），但這意味着它在頁面加載時可見片刻。 – teedyay 2009-10-30 15:55:14

使用這個jQuery代碼，在div上顯示：none（如果你願意的話，你可以用內聯代碼），然後你可以切換div：var flip = 0; $（「button」）。click（function（）{$（「div」）。toggle（flip ++％2 == 0）;}） – tahdhaze09 2009-10-30 16:14:25

調用樣式initially-hidden。它準確地傳遞了這些信息，並且如果您想使用jQuery來查詢該風格，那麼這是有意義的。

來源

2009-10-30 15:34:51

這很漂亮。 – teedyay 2009-11-02 14:03:29

我認爲如果你打算通過改變從「」到「none」的顯示切換，你應該使用樣式。如果要通過將類從「隱藏」更改爲「」來切換，則應該使用類。換句話說，要保持一致。

來源

2009-10-30 15:36:55

如果您打算使用JavaScript框架來執行此操作，則應該使用其中的約定。例如，Prototype使用style =「display：none;」方法，那麼稍後調用Element.show（）和Element.hide（）來更改它。 – Jason 2009-10-30 15:48:11

雖然我同意讓整個班級調出一些東西的初始可見性看起來有點多，但它確實使得更容易弄清楚發生了什麼。特別是如果你將它命名爲描述性的，比如前面提到的「初始隱藏」。

所以，雖然我不能說出具體的設計主體，但我認爲我所建議的有其優點。這比使用無法重用的直接樣式更容易維護，並且比使用jQuery調用hide（）更加明顯。

來源

2009-10-30 16:00:17

他將該類用作JS的目標。這是必要的。你甚至不需要包含在樣式表中。實際上，因爲這個類只用於JS/jQuery，所以你根本不應該使用樣式表。 var flip = 0; （「button」）。click（function（）{（「div」）。toggle（flip ++％2 == 0）; }）; 顯示：沒有問題，並且可以準確切換切換。點擊按鈕，它會出現，再次點擊並消失。確切地說是希望它工作的方式。打開和關閉div。 – tahdhaze09 2009-10-30 16:11:04

我同意它按照提問者的要求工作，但提問者確實提出了不同的解決方案。問題不是'我該怎麼做'，而是'更好的'。 – 2009-10-30 16:15:52

我正在使用該類來定義頁面第一次加載時元素的可見性。在CSS中，.hidden（或.initial-hidden）將是{display：none; }。我不會使用類作爲我的jQuery選擇器 - jQuery可能會根據id或其他規則選擇單獨的div。 – teedyay 2009-10-30 16:29:27

我期望切換元素的可見性：我應該從class =「...」還是style =「...」開始？

回答

相關問題