如何用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;

示例

在这个例子中，我们可以看到一个名为#myDIV的div元素。单击“显示”按钮后，此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>

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

更新于：2022年10月31日

5K+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.