如何使用 JavaScript 显示 HTML 元素？

在本教程中，我们将学习如何使用 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 属性显示或隐藏元素。它在许多方面类似于 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 属性，后者显示或隐藏元素。当 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 和一个包含一些文本的类。点击“确定”按钮后，我们可以显示隐藏的文本。hidden 属性有助于在赋予其 true 的布尔值时显示一些隐藏的文本。当赋予其 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>

在此输出中，用户可以看到，在点击按钮后，消息显示在用户的屏幕上。

更新于：2022年10月31日

5K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告