如何在 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 属性。

Open Compiler
<!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，则父元素的可见性值将设置为我们的元素。

Open Compiler
<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 属性设置元素的可见性。用户从下拉列表中选择所需的显示值。

当用户点击按钮时，我们会调用函数根据上面给出的语法设置元素的显示。

Open Compiler
<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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告