如何使用 JavaScript 显示 HTML 元素?

javascriptobject oriented programmingfront end technology更新于 2024/6/17 13:00:17

在本教程中，我们将学习如何使用 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。

创建者可以使用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属性类似。可见性:hidden 表示元素的内容将被隐藏，元素仍将保持其原始位置和大小，而 display:none 表示元素将完全隐藏。

语法

以下是 display 属性的语法 -

它返回 display 属性 -

object.style.display

它设置 display 属性 -

object.style.display = value;

示例

在此示例中，我们可以看到已创建 div 元素 #myDIV。单击"显示"按钮时，此 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>