如何在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+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告