如何在 JavaScript 中設定元素是否可見？

在本教程中，我們將學習如何在 JavaScript 中設定元素是否可見。使用visibility屬性隱藏或顯示元素。visibility 屬性採用不同的值，例如 visible、hidden、collapse 等。要顯示元素，我們將 visibility 屬性設定為“visible”，而要隱藏元素，我們將它設定為“hide”。我們還可以使用display屬性設定可見性。

讓我們簡要討論一下 JavaScript 中用於實現目標的兩個屬性。

使用 Style visibility 屬性

JavaScript 為我們提供了visibility屬性，我們可以用它來設定元素是否可見。

visibility屬性設定或返回元素是否可見。可見性使內容不可見，但內容不會離開其位置或大小。

語法

以下是使用 JavaScript 中的 visibility 屬性設定元素是否可見的語法：

object.style.visibility = value; 
or 
object.style["visibility"] = value; 
or 
object.style.setProperty("visibility", value);

使用以上任意一種語法，我們都可以設定元素是否可見。

可見性值

以下是我們可以為 visibility 屬性設定的樣式：

  • visible - 元素可見。

  • hidden - 元素不可見，但仍然存在。

  • collapse - 在表格行或單元格上使用時，效果與 hidden 相同。

  • initial - 將此屬性設定為其預設值。

  • inherit - 從其父元素繼承此屬性。

此屬性的預設值為 visible。返回值是一個字串，表示元素的內容是否可見。

示例 1

您可以嘗試執行以下程式碼，以學習如何使用 visibility 屬性。

<!DOCTYPE html> 
<html> 
<body> 
   <p id = "pid">Demo Text</p> 
   <button type = "button" onclick = "displayHide()"> Hide </button> 
   <button type = "button" onclick = "displayShow()"> Show </button> 
   <script> 
      function displayHide() { 
         document.getElementById("pid").style.visibility = "hidden"; 
      }  
      function displayShow() { 
         document.getElementById("pid").style.visibility = "visible"; 
      } 
   </script> 
</body> 
</html>

示例 2

在此程式中，我們正在設定元素的可見性。使用者從下拉列表中選擇所需的可見性值。

當用戶點選按鈕時，我們會呼叫函式根據上面給出的語法設定元素的可見性。

如果使用者選擇inherit，則父元素的可見性值將設定為我們的元素。

<html> 
<head> 
   <style> 
      #visibleEleUsrEl{ 
         background-color: #F5F5DC; 
         text-align: center 
      } 
   </style> 
</head> 
<body> 
   <h3>Set the visibility of an element using <i>the visibility property.</i> 
   </h3> 
   <div id = "visibleEleUsrParent">     
      <div id = "visibleEleUsrEl"> Set Visibility </div> 
   </div> 
   <br> 
   <br> 
   <div id = "visibleEleUsrBtnWrap"> 
      <select id = "visibleEleUsrSel"> 
         <option selected = "selected"> visible </option> 
         <option> hidden </option> 
         <option> collapse </option> 
         <option> initial </option> 
         <option> inherit </option> 
      </select> 
      <br>    
      <p>Select visibility and click on the button.</p> 
      <button onclick = "setVisibility();"> Apply </button> 
   </div> 
   <br>     
</body>   
   <script> 
      function setVisibility(){ 
         var visibleEleUsrSelTag = document.getElementById("visibleEleUsrSel"); 
         var visibleEleUsrSelIndx = visibleEleUsrSelTag.selectedIndex; 
         var visibleEleUsrSelStat = visibleEleUsrSelTag.options[visibleEleUsrSelIndx].text;      
         var visibleEleUsrEl = document.getElementById("visibleEleUsrEl"); 
         visibleEleUsrEl.style.visibility = visibleEleUsrSelStat; 
         visibleEleUsrEl.innerHTML = "Visibility =  <b>"  
         + visibleEleUsrEl.style["visibility"] + "</b>";          
      } 
   </script> 
</html>

使用 Style display 屬性

使用此屬性，我們可以設定或返回元素的顯示型別。如果 display 設定為 none，則整個元素將變得不可見，並且不佔用任何空間。

語法

以下是使用 JavaScript 中的 display 屬性設定元素是否可見的語法：

object.style.display = value; 
or 
object.style["display"] = value; 
or 
object.style.setProperty("display", value);

我們可以使用以上任意一種語法設定元素的顯示。

display 值

  • block - 元素呈現為塊級元素。這意味著它不允許在其左側或右側顯示任何內容。

  • none - 元素不顯示。

示例

在此程式中，我們正在使用 display 屬性設定元素的可見性。使用者從下拉列表中選擇所需的顯示值。

當用戶點選按鈕時，我們會呼叫函式根據上面給出的語法設定元素的顯示。

<html> 
<head> 
   <style> 
      #displayEleUsrEl{ 
         background-color: #BA55D3; 
         text-align: center 
      } 
   </style> 
</head> 
<body> 
   <h3>Set the visibility of an element using <i>the display property.</i>
   </h3> 
   <div id = "displayEleUsrParent">     
      <div id = "displayEleUsrEl"> Set Display </div> 
   </div> 
   <br> 
   <br> 
   <div id = "displayEleUsrBtnWrap"> 
      <select id = "displayEleUsrSel"> 
         <option selected = "selected"/> block 
         <option/> none 
      </select> 
      <br>    
      <p>Select a display and click on the button.</p> 
      <button onclick = "setDisplay();"> Apply </button> 
   </div> 
   <br>     
</body>   
   <script> 
      function setDisplay(){ 
         var displayEleUsrSelTag = document.getElementById("displayEleUsrSel"); 
         var displayEleUsrSelIndx = displayEleUsrSelTag.selectedIndex; 
         var displayEleUsrSelStat = displayEleUsrSelTag.options[displayEleUsrSelIndx].text;      
         var displayEleUsrEl = document.getElementById("displayEleUsrEl"); 
         displayEleUsrEl.style.display = displayEleUsrSelStat; 
         displayEleUsrEl.innerHTML = "Display =  <b>" +  
         displayEleUsrEl.style["display"] + "</b>";          
      } 
   </script> 
</html>

在本教程中，我們介紹了在 JavaScript 中設定元素可見性的兩種屬性。visibility 屬性和 display 屬性以類似的方式顯示元素。但是，visibility 屬性透過保留其空間和大小來隱藏元素。同時，display 屬性完全隱藏元素，不保留任何空間。使用者可以根據需要選擇任何方法。

更新於：2022年10月12日

3K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.