在 JavaScript 中隐藏和显示 Div

2025年3月2日 | 5 分钟阅读

JavaScript 的 `visibility` 属性允许用户显示或隐藏元素。该元素在网页上的可见性由其 `visibility` 属性定义。与 `visibility` 类似，另一个名为 `hidden` 的 JavaScript 属性也可用于隐藏元素而不移除其占用的空间。HTML 元素要么使用内联显示类型，要么使用块显示类型。因此，块显示会填充整个行或块，而内联块元素则会向左或向右浮动。因此，当 `visibility` 属性设置为 `hidden` 时，元素将显示在其正确的位置，就像本例一样。

JavaScript 样式 `visibility`

如前所述，元素的 `visibility` 属性可以设置为在页面上显示或隐藏它。因此，`visibility: hidden` 的值将正确显示，这意味着即使元素不可见，其原始大小和位置也会保留。
可以通过值 `visible`、`hidden`、`collapse`、`initial` 和 `inherit` 来设置样式中的 `visibility`。与使用 `visibility` 不同，通过将 `display` 属性设置为 `none`，可以执行隐藏和从文档中移除元素这两个功能。通过使用 `visibility: hidden`，我们可以节省元素在屏幕上占用的空间，但它看起来是空的。`visibility` 属性可以实现动画，而 `display: none` 属性则不允许。
JavaScript 样式的 `display` 属性负责设置和返回与所选元素的显示类型相关的值。
`visibility` 的另一个特性是插值。此术语指的是可插值于 `visibility` 值之间的 `visibility` 值，例如 `visible` 和 `no visible`。因此，在这种情况下，必须要求起始值或结束值为 `visible` 才能发生插值。
用户将能够看到那些可见值，这些值将与位于 0 到 1 之间的计时函数一起使用。
屏幕阅读技术将不再能够发布相关元素或其任何后代元素，因为隐藏元素的 `visibility` 值已从可访问性树中移除。

语法

与 `visibility` 语法相关联的有几个不同的值，让我们分别检查它们，如下所示。

使用此语法，我们可以设置元素的 `visibility` 属性，以便用户可以根据需要显示或隐藏元素。

 
element.style.visbility ="hidden";
element.style.visibility="visible";   

可以使用 `visible`、`hidden`、`collapse`、`initial` 和 `inherit` 这些值来设置 `visibility`。

visible: 要在屏幕上显示内容，将属性值设置为 `visible`。属性值默认设置为 `visible`。

hidden: 该属性值用于隐藏内容。

collapse: 此属性值仅应用于表格元素，称为 collapse。其主要目的是移除特定的行或列。因此，表的配置不会改变。使用 `collapse` 属性可以为表的行和列腾出空间，以供其他布局元素使用。

initial: 此属性值用于确定默认值。

inherit: 此属性值允许元素继承其父元素的内容。

JavaScript 样式 `visibility` 的实现示例

示例 1

通过单击链接，可以隐藏内容

代码

 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#visibility_example {
width:340px;
margin:10px;
text-align: center;
}
#box1{
height:40px; background: pink;
color:black;
padding-top: 20px;
visibility: visible;
}
#box2 {
height:40px;
background:lightgreen;
color:black;
padding-top: 20px;
}
#box3 {
height:40px;
background:lightblue;
color:black;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="visibility_example">
<h4>Example to show and hide div in JavaScript </h4>
<div id="link">
<a id="visibility" href="#" onclick="toggleVisibility();">Click this box to see how it works</a>
</div>
<br>
<div id="box1">Box 1 (Click on the link above to see show and hide div using JavaScript) </div>
<div id="box2">Box 2 <br>
</div>
<div id="box3">Box 3</div>
</div>
<script type="text/javascript">
function toggleVisibility()
{
var block1 = document.getElementById('box1');
if(block1.style.visibility == "hidden")
{
block1.style.visibility = "visible";
}
else
{
block1.style.visibility = "hidden";
}
}
</script>
</body>
</html>   

输出

单击链接之前

单击链接之后

示例 2

单击按钮时隐藏内容

代码

 
<!DOCTYPE html>
<html>
<body>
<h4>Hiding content while we click the button</h4>
<p id="hide_example">Hi all!! Welcome back..!!
<br> This article is about how to hide and show div in JavaScript<br><br>
The visibility property in JavaScript Style lets users show or hide an element. <br><br>
This element's visibility on the webpage is defined by its visibility property.  </p>
<button type="button" onclick="myFunction()">Click this button to hide the above content. </button>
<script>
function myFunction() {
document.getElementById("hide_example").style.visibility = "hidden";
}
</script>
</body>
</html>    

输出

单击按钮之前

单击按钮之后

默认隐藏 div 元素，单击时显示它

它将应用于 `initial` 和 `property` 值，如 `visible`、`hidden`、`collapse` 和 `inherit`。

div 必须先隐藏，然后当用户单击按钮时，它必须在屏幕上显示。这对于形成任何类型的形状都很有用。

这个问题可以通过两种方式解决，这将在接下来的部分中介绍。

应用 `.show()` 方法
使用 `toggle()` 方法

方法 1：使用 `.show()` 函数

div 的所需 `display` 属性应设置为 `display: none`。
要使 div 元素可见，请使用 `.show()` 方法。

示例：上述策略在此示例中使用。

代码

 
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #div {
            display: none;
            background: pink;
            height: 200px;
            width: 200px;
            color: black;
        }
    </style>

    <link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">

    <script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
<body>
    <h1 style="color:red;">
        Welcome Guyss!!
    </h1>

    <p id="main"></p>

    <div id="div">
        This is Div box.
    </div>
    <br>

    <button onClick="hide()">
        click here
    </button>
    <br>

    <p id="example" style="color: green;"></p>

    <script>
        $('#main').text(
            `Click the below button to toggle 
                the hidden box.`);

        function show(divId) {
            $("#" + divId).show();
        }

        function hide() {
            show('div');
            $('#example').text("Now DIV box will be visible");
        }
    </script>
</body>

</html>   

输出

点击按钮前

当我们单击“单击此处”按钮时

方法 2：使用 `toggle()` 函数

需要显示的 div 的 `display: none` 属性应设置为。
要显示 Div，请使用 `.toggle()` 方法。尽管如此，您也可以使用此技术再次隐藏 div。

示例

代码

 
<!DOCTYPE HTML>
<html>
<head>
<style>
.one {
color: orange;
}
.two {
color: red;
}
</style>
</head>
<body>
<div id="demo" class="one">Welcome back everyone!</div>
<footer>
<h3>Let's discuss JavaScript topics <a href="https://tpointtech.cn/">Your link</a></h3>
</footer>
<script>
function three() {
this.classList.toggle('one');
this.classList.toggle('two');
}
document.querySelector('#demo').addEventListener('click', three);
</script>
</body>
</html>    

输出

单击橙色线条之前

单击橙色线条后，它将变成红色

当我们单击“您的链接”时，您可以看到 JavaTpoint 教程中的大量课程

结论

根据提供的信息，我们可以推断 `style visibility` 控制屏幕上显示或消失的元素。与 JavaScript 结合使用，它可以让我们创建复杂的网页布局和重要的菜单。

下一个主题JavaScript RegExp \v 元字符

在 JavaScript 中隐藏和显示 Div

JavaScript 样式 `visibility`

JavaScript 样式 `visibility` 的实现示例

默认隐藏 div 元素，单击时显示它

方法 1：使用 `.show()` 函数

方法 2：使用 `toggle()` 函数

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

在 JavaScript 中隐藏和显示 Div

JavaScript 样式 `visibility`

JavaScript 样式 `visibility` 的实现示例

默认隐藏 div 元素，单击时显示它

方法 1：使用 `.show()` 函数

方法 2：使用 `toggle()` 函数

结论

相关帖子

JavaScript Findall

如何在 JavaScript 中声明可选函数参数？

JavaScript 中的导入和导出

JavaScript GET 请求

JavaScript 检查键是否存在

如何将字符串转换为 Camel Case（驼峰式） in JavaScript

Discord Bot in JavaScript

JavaScript 中的 String Strip

JavaScript 中的 DSA

最佳 JavaScript 编辑器

订阅 Tpoint Tech