如何在JavaScript中設定元素的可見性？

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

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

使用Style visibility屬性

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

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

語法

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

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

使用以上任何一種語法，我們都可以設定元素的可見性。

Visibility值

以下是我們可以為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.