如何使用 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.