如何使用JavaScript隐藏HTML元素

在本教程中，我们将学习如何使用JavaScript隐藏HTML元素。

使用JavaScript隐藏HTML元素可以采用不同的方式。在本教程中，我们将介绍三种最常见的方式−

使用 hidden 属性
使用 style.display 属性
使用 style.visibility 属性

通常情况下，我们使用 hidden属性来隐藏一个特定的元素。我们可以通过将hidden属性的值分别设置为true或false来在隐藏和显示元素之间进行切换。

在另外两种方式中，我们使用元素的style对象。在style对象中，有两个属性用来隐藏HTML元素，一个是display，另一个是visibility。

在 JavaScript 中，我们可以使用这两个属性来隐藏HTML元素，但是这两者之间的主要区别在于使用 style.visibility属性时，特定标签是不可见的，但标签所占的空间仍然被分配。而在 style.display 属性中，不仅标签被隐藏，而且不会分配任何空间给该元素。

使用hidden属性

在JavaScript中，可以使用元素的hidden属性来隐藏一个元素。将hidden属性的值设置为true来隐藏该元素。

语法

使用hidden属性的语法如下−

document.getElementById('element').hidden = true

在上面的语法中，’element’ 是一个 HTML 元素的 id，通过使用 document.getElementById() 方法，我们访问该元素并将其 hidden 属性设置为 true，以隐藏该元素。

示例

在下面的示例中，我们使用 hidden 属性来使用 JavaScript 隐藏一个 div 元素。

<html>
<body>
   <div id="dip"> Click the below buttons to hide or show this text. 
   </div><br>
   <button onclick="hide()"> Hide Element </button>
   <button onclick="show()"> Show Element </button>
   <script>
      function hide() {
         document.getElementById('dip').hidden = true
      }
      function show() {
         document.getElementById('dip').hidden = false
      }
   </script>
</body>
</html>

使用style.display属性

在JavaScript中，style.display属性也用于隐藏HTML元素。它可以有像’block’、’inline’、’inline-block’等值，但隐藏元素时使用的值是’none’。使用JavaScript，我们将style.display属性值设置为’none’以隐藏HTML元素。

语法

以下是在JavaScript中使用style.display属性隐藏HTML元素的语法。

document.getElementById('element').style.display = 'none'

在上面的语法中，’element’是一个HTML元素的id，通过使用 ** document.getElementById()** 方法，我们可以访问该元素并将其 style.display 属性修改为’none’来隐藏该元素。

例子

在下面的例子中，我们使用了 style.display 属性来使用JavaScript隐藏一个

元素。

<html>
<style> 
   #myDIV {
      width: 630px;
      height: 300px;
      background-color: #F3F3F3;
   }
</style>
<body>
   <p> Click the "Hide Element" button to hide the div element. </p>
   <button onclick="hide()"> Hide Element </button>
   <div id="myDIV"> Hello World! This is DIV element </div>
   <script>
      function hide() {
         document.getElementById('myDIV').style.display = 'none'
      }
   </script>
</body>
</html>

使用style.visibility属性

在JavaScript中，style.visibility属性也用于隐藏HTML元素。它可以有像’visible’、’collapse’、’hidden’、’initial’等值，但隐藏元素的值是’hidden’。使用JavaScript，我们将style.visibility属性的值设置为’hidden’来隐藏HTML元素。

语法

以下是使用style.visibility属性隐藏HTML元素的JavaScript的语法-

document.getElementById('element').style.visibility = 'hidden'

在上述语法中，’element’是HTML元素的id，并且通过使用 document.getElementById() 方法，我们可以访问该元素并将其 style.visibility 属性更改为’hidden’以隐藏该元素。

示例

在下面的示例中，我们使用了 style.visibility 属性来使用JavaScript隐藏元素。

<html>
<style> 
   #dip {
      width: 630px;
      height: 300px;
      background-color: #F3F3F3;
   }
</style>
<body>
   <p> Click the "Hide Element" button to hide the div element. </p>
   <button onclick="hide()"> Hide Element </button>
   <button onclick="show()"> Show Element </button>
   <div id="dip"> Hello World! This is DIV element </div>
   <script>
      function hide() {
         document.getElementById('dip').style.visibility = 'hidden';
      }
      function show() {
         document.getElementById('dip').style.visibility = 'visible';
      }
   </script>
</body>
</html>

在上面的输出中，用户可以看到使用 style.visibility 属性隐藏了元素，但元素仍然在浏览器中占据着空间。

在本教程中，我们学习了三种使用JavaScript隐藏元素的方法。第一种方法是使用元素的hidden属性。第二种方法是将 style.display 属性设置为’hidden’。第三种方法是将 style.visibility 属性设置为’hidden’。