2-10 動態添加 CSS 樣式來隱藏 HTML 元素

如果要將計數器的數字控制在 0 ~ 10 之前，除了透過上個單元所說的，在 JSX 中使用邏輯運算子來判斷該 HTML 區塊要不要呈現之外，另一個很常用的方式就是使用 CSS 樣式，其中常見的樣式像是 display: none 和 visibility: hidden，但不論你用的是哪一種，這個 HTML 元素仍然可以在開發者工具的 Elements 頁籤中被看到，只是透過 CSS 把它隱藏起來，因此使用者在畫面上才看不到。

這裡為了避免畫面排版會因為元素隱藏而有改變，因此使用 visibility: hidden;。CSS 樣式的操作和前面單元說明的方式相同，可以使用行內樣式（inline-style），也可以使用 CSS class，要做到動態變更套用的 CSS 樣式，這裡一樣會用到前面所提到的邏輯運算子。

info

💡 visibility: hidden; 和 display: none; 的差別？這兩種 CSS 屬性都可以讓使用者看不到該元素，但差別在於 display: none; 在把該元素隱藏的情況下，同時會移除該元素原本佔據在網頁上的空間，因此當某元素原本存在而用了 display: none; 的話，會因為該元素不見而導致畫面排版「跳一下」。 visibility: hidden; 同樣會把該元素給隱藏起來，但是原本該元素所佔據的空間還是會保留在那裡，因此不會有因為東西被移除後而畫面排版「跳一下」的情況。

在開始下面的練習前，我們可以先把上個單元在 JSX 中使用邏輯運算子來做條件轉譯的方式移除。

使用動態的行內樣式#

先使用 inline-style 來修改 CSS 樣式，在 JSX 中使用行內樣式就是在 style={} 屬性後的 {} 中帶入帶有樣式的物件即可。

透過行內樣式的語法搭配邏輯運算子後，針對向上的箭頭，我們希望當 count >= 10 的時候就套用 visibility: hidden; 的樣式，因此可以寫成：

<div
  className="chevron chevron-up"
  style={{
    visibility: count >= 10 && 'hidden',
  }}
  onClick={() => setCount(count + 1)}
/>

針對向下的箭頭，當 count <= 0 的時候才套用 visibility: hidden;，因此向下箭頭可以寫成：

<div
  className="chevron chevron-down"
  style={{
    visibility: count <= 0 && 'hidden',
  }}
  onClick={() => setCount(count - 1)}
/>

如此就可以達到預期的效果。

換你了：使用動態的行內樣式試試看#

可以點擊 Github 說明頁上「使用 inline-style 來隱藏 HTML 元素」的連結，或直接打開下方連結檢視完整的程式碼，看看做起來的效果是否相同：

https://codepen.io/PJCHENder/pen/abdZqwY

Imgur

使用動態的 CSS class#

既然可以使用行內樣式來達到這個效果，自然也可以使用 CSS 的 class 來做到。

可以先在 CSS 的區塊中添加一個名為 .visibility-hidden 的樣式：

.visibility-hidden {
  visibility: hidden;
}

原本的 className 我們是直接帶入字串，但現在我們希望能夠動態改變後面帶入的 class，因此 className 後面要改成用 {} 來帶入變數，這個變數一樣是字串，只是會搭配「樣板字面值」的用法（也就是鍵盤 1 左邊的那一撇），來讓它動態改變。

針對向上箭頭，改寫後像這樣：

<div
  className={`chevron chevron-up ${count >= 10 && 'visibility-hidden'}`}
  onClick={() => setCount(count + 1)}
/>

針對向下箭頭：

<div
  className={`chevron chevron-down ${count <= 0 && 'visibility-hidden'}`}
  onClick={() => setCount(count - 1)}
/>

如此就可以跟使用行內樣式一樣，有一樣的效果。

換你了：使用動態的 className 試試看#

你可以透過 Github 說明頁的「使用 CSS Class 來隱藏 HTML 元素」連結，或下方網址檢視完整程式碼，看看做起來的效果是否相同：

https://codepen.io/PJCHENder/pen/xxZOYzJ

Imgur

該使用條件轉譯來移除 DOM 元素或使用 CSS 樣式隱藏 DOM 元素#

實務上要使用 CSS 樣式讓使用者看不到元素就好，還是需要從 DOM 中整個把元素移除，端看這個功能的目的。如果使用的是 CSS 樣式，使用者就比較有機會透過瀏覽器的開發者工具自己去把樣式解開後，然後繼續點擊向上按鈕，往更高的值加上去。

因此一般來說，如果你需要比較嚴格的去控制使用者的行為，不想要使用者透過 CSS 就能簡單修改的話，那麼就把 DOM 整個移除；但如果這個功能被使用者手動打開也不會有太大影響的話，那就使用 CSS 樣式來控制畫面就好，如此會有比較好的效能和體驗。