如何使用 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+ 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告