JavaScript 隱藏/顯示元素

1. 使用 style.visibility 屬性隱藏/顯示 HTML 元素
2. 使用 style.display 屬性隱藏/顯示 HTML 元素
3. 使用 jQuery 的 hide() / show() 來隱藏/顯示 HTML 元素
4. 使用 jQuery toggle() 隱藏/顯示 HTML 元素
5. 使用 addClass()/removeClass() 隱藏/顯示 HTML 元素

我們經常遇到想要在顯示和隱藏元素之間切換的情況。本教程介紹如何在 JavaScript 中隱藏/顯示元素。

使用 style.visibility 屬性隱藏/顯示 HTML 元素

style.visibility 屬性設定為隱藏時，會隱藏目標元素，但不會將其從流中刪除。因此，目標元素已呈現但不可見。它不影響佈局並允許其他元素佔據其自然空間。我們可以通過將屬性重新設定為 visible 使目標元素再次可見。

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

使用 style.display 屬性隱藏/顯示 HTML 元素

style.display 屬性設定為 none 時，會將目標元素從頁面的正常流中移除，並允許其餘元素佔據其空間。雖然目標元素在頁面上不可見，但我們仍然可以通過 DOM 與它進行互動。所有後代都會受到影響，並且不會像父元素一樣顯示。我們可以通過將屬性設定為 block 使目標元素再次可見。建議將 display 設定為 ''，因為 block 會為元素新增邊距。

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

使用 jQuery 的 hide() / show() 來隱藏/顯示 HTML 元素

show() 方法幫助我們顯示通過 display:none 或 jQuery hide() 方法隱藏的元素。它無法顯示隱藏可見性的元素。它接受以下三個引數：

1. Speed：指定衰落效果延遲的速度。
2. Easing：指定用於轉換到可見/隱藏狀態的緩動函式。它需要兩個不同的值：swing 和 linear。
3. Callback：是在 show() 方法執行完畢後執行的函式。

類似地，jQuery hide() 方法有助於隱藏所選元素。它採用與 show() 相同的 3 引數。

$('#element').hide();  // hide
$('#element').show();  // show

使用 jQuery toggle() 隱藏/顯示 HTML 元素

jQuery toggle() 是一個特殊的方法，它允許我們在 hide() 和 show() 方法之間切換。它有助於使隱藏元素可見和隱藏可見元素。它還採用與 jQuery 的 hide() 和 show() 方法相同的三個引數。它還需要第四個引數顯示，有助於切換隱藏/顯示效果。它是一個布林引數，當設定為 false 時，隱藏元素。

$('div.d1').toggle(500, swing);  // toggle hide and show

使用 addClass()/removeClass() 隱藏/顯示 HTML 元素

addClass() 函式幫助我們將一個類新增到元素的現有類列表中，而 removeClass() 幫助我們刪除它。我們可以使用這些函式通過編寫一個隱藏元素的自定義類然後從類列表中新增和刪除它來切換隱藏/顯示。

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show