如何使用 JavaScript 顯示 HTML 元素？

在本教程中，我們將學習如何使用 JavaScript 顯示 HTML 元素。

HTML 元素是構成 HTML 格式檔案的元件。這些元件負責構建網頁並定義其內容。在 HTML 中，一個元素通常由一個開始標籤（標籤名稱）、一個結束標籤（標籤名稱）以及它們之間新增的任何文字組成。從技術上講，構成元素的是結束標籤、開始標籤、內容和屬性的集合。

一些 HTML 元素如下：

開始標籤 內容 結束標籤
<p> 這是一段文字。 </p>
<h1> 這是最大的標題。 </h1>
<div> 這是個分段內容。 </div>
<br> 換行。

在某些情況下，HTML 元素 <p>...</p> 和 <h1>...</h1> 同時存在。一些 HTML 元素，例如 <img.../>、< hr /> 和 <br /> 元素，不需要關閉。它們被稱為空元素。

此外，在本教程中，我們有不同的方法來實現我們的目標。

使用 visibility 屬性

可以使用 visibility 屬性設定或返回元素的可見性。

建立者可以使用 visibility 屬性顯示或隱藏元素。它在許多方面類似於 show 屬性。區別在於，visibility:hidden 使元素的內容不可見，同時保持元素的原始位置和大小，而display:none則完全隱藏元素。

語法

以下是使用 visibility 屬性的語法：

document.getElementById("div").style.visibility = "visible";

示例

在這個示例中，我們看到建立了一個包含文字的段落 div，當點選“隱藏”按鈕時，該文字將被隱藏。當點選“顯示”按鈕時，顯示相同的文字。visibility 屬性有助於更改 HTML 元素的可見性。它控制元素是否對訪問者可見或隱藏。

<html>
   <body>
      <p id="div">Click on Hide to remove text & Click on Show to display text</p>
      <button type="button" onclick="displayHide()"> Hide </button>
      <button type="button" onclick="displayShow()"> Show </button>
      <script>
         function displayHide() {
            document.getElementById("div").style.visibility = "hidden";
         }
         function displayShow() {
            document.getElementById("div").style.visibility = "visible";
         }
      </script>
   </body>
</html>

在以上輸出中，使用者可以看到，點選“顯示”後，文字在使用者螢幕上可見。點選“隱藏”按鈕後，我們看到文字從使用者的視野中隱藏。

使用 display 屬性

可以使用 HTML DOM 中的 Style display 屬性設定或返回元素的顯示型別。它類似於 visibility 屬性，後者顯示或隱藏元素。當 visibility: hidden 僅表示元素的內容將被隱藏，元素仍將保留其原始位置和大小，而 display: none 則表示元素將被完全隱藏。

語法

以下是 display 屬性的語法：

它返回 display 屬性：

object.style.display

它設定 display 屬性：

object.style.display = value;

示例

在這個示例中，我們可以看到建立了一個 div 元素 #myDIV。點選“顯示”按鈕後，此 div 元素將顯示給使用者。點選“隱藏”按鈕後，此 div 元素將從使用者的視野中隱藏。display 元素控制 #myDIV 元素是否對使用者可見或隱藏。

<html>
   <head>
      <style>
         #myDIV {
            width: 100px;
            height: 100px;
            background-color: lightblue;
         }
      </style>
   </head>
   
   <body>
      <p>Click the "Show" button to display the div element</p>
      <p>Click the "Hide" button to remove the div element</p>
      <button onclick="myFunction()">Show</button>
      <button onclick="myFunction1()">Hide</button>
      
      <div id="myDIV">
         This is my DIV element.
      </div>
      
      <script>
         function myFunction() {
            document.getElementById("myDIV").style.display = " block";
         }
         function myFunction1() {
            document.getElementById("myDIV").style.display = "none";
         }
      </script>
   </body>
</html>

在此輸出中，我們可以看到，點選“顯示”按鈕後，div 元素可見，點選“隱藏”按鈕後，div 元素被隱藏。

使用 hidden 屬性

布林值構成 hidden 屬性。它表示元素在存在時要麼尚不重要，要麼不再相關。瀏覽器不應該顯示具有定義的 hidden 屬性的元素。

hidden 屬性的另一個應用是防止使用者檢視元素，直到滿足其他條件（如選中複選框等）。然後可以透過使用 JavaScript 移除 hidden 屬性來使元素可見。

語法

以下是使用 JavaScript 上的 Hidden 屬性的語法：

document.getElementById("div_element").hidden = true;

示例

在此示例中，div 元素包含一個 id 和一個包含一些文字的類。點選“確定”按鈕後，我們可以顯示隱藏的文字。hidden 屬性有助於在賦予其 true 的布林值時顯示一些隱藏的文字。當賦予其 false 的布林值時，它將隱藏之前的文字。

<html>
   <head>
   </head>
   <body>
      <div id="welcome" class="panel">
         <h3>Using Hidden Property</h3>
         <p>Click on the OK button to Display A message</p>
         <button class="button" id="okButton">OK</button>
      </div>
      <div id="awesome" class="panel" hidden>
         <h3>Have a great day with your loved ones!</h3>
      </div>
      <script>
         document.getElementById("okButton")
         .addEventListener("click", function() {
            document.getElementById("welcome").hidden = true;
            document.getElementById("awesome").hidden = false;
         }, false);
      </script>
   </body>
</html>

在此輸出中，使用者可以看到，在點選按鈕後，訊息顯示在使用者的螢幕上。

更新於：2022年10月31日

5K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.