JavaScript 隐藏元素

在 JavaScript 中，我们可以通过 style.display 或 style.visibility 来隐藏元素。visibility 属性在 JavaScript 中也用于隐藏元素。style.display 和 style.visibility 之间的区别在于，当使用 visibility: hidden 时，标签不可见，但会为其分配空间。使用 display: none 时，标签同样不可见，但页面上不会为其分配任何空间。

在 HTML 中，我们可以使用 hidden 属性来隐藏指定的元素。当 HTML 中的 hidden 属性设置为 true 时，元素被隐藏；当值为 false 时，元素可见。

语法

使用 style.hidden 和 style.visibility 隐藏元素的通用语法如下。

使用 style.hidden

使用 style.visibility

现在，让我们通过一些示例来理解 JavaScript 中元素的隐藏。

示例 1

在此示例中，我们将看到如何使用 JavaScript 的 style.display 属性来移除元素。这里有一个 div 元素和一个段落元素，它们会在单击给定的 HTML 按钮时被隐藏。我们需要单击 “Click me!” 按钮来查看效果。

输出

执行后，输出将是：

单击按钮后，输出将是 -

示例 2

在此示例中，我们将看到如何使用 JavaScript 的 style.visibliity 属性来隐藏元素。这里，一个 div 元素和一个段落元素被隐藏了，但它们仍然分配了空间。

我们需要单击 “Click me!” 按钮来查看效果。

输出

执行上述代码后，输出为：

单击按钮后，输出将是 -

Example3

在此示例中，我们同时使用了 style.display 和 style.visibility JavaScript 属性来查看它们之间的区别。这里有一个 div 元素和一个 <h3> 标题元素，我们将在其上应用属性。我们通过应用 style.display 属性来隐藏 div 元素，并通过应用 style.visibility 属性来隐藏 <h3> 元素。

我们需要单击 “Click me!” 按钮来查看效果。

输出

在输出中，我们可以看到应用了 style.visibility 属性的 div 元素（此处应为英文的“div”元素）被隐藏了，但仍然分配了空间。而标题（此处应为英文的“heading”元素，即应用了 style.display 属性的元素）被隐藏了，并且没有分配任何空间。

单击按钮后，结果将是 -