如何用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;

示例

在這個例子中，我們可以看到一個名為#myDIV的div元素。單擊“顯示”按鈕後，此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和一個類，其中包含一些文字。單擊“確定”按鈕後，我們可以顯示隱藏的文字。當賦予它true的布林值時，hidden屬性有助於顯示一些隱藏的文字。當賦予它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.