迹忆客 专注技术分享

我们经常遇到想要在显示和隐藏元素之间切换的情况。本教程介绍如何在 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() 方法隐藏的元素。它无法显示隐藏可见性的元素。它接受以下三个参数：

类似地，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