如何使用 JavaScript 隐藏 HTML 元素？

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

在 JavaScript 中，隐藏 HTML 元素可以通过多种方式实现。在本教程中，我们将了解三种最常用的方法：

  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 元素。

语法

以下是使用 JavaScript 中的 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-09-10

49K+ 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告