如何使用 JavaScript 隐藏 HTML 元素？

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

隐藏 HTML 元素可以在 JavaScript 中通过多种方式执行。在本教程中，我们将看到三种最常用的方法：

  1. 使用hidden属性
  2. 使用style.display属性
  3. 使用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 隐藏 div 元素。

<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 元素的语法：

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”。

更新于： 2023年9月10日

49K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.