JavaScript 隐藏/显示

在JavaScript中，我们可以使用 style.display 或 style.visibility 隐藏元素强>。 JavaScript中的 visibility 属性也用于隐藏元素。 style.display 和 style.visibility 之间的区别是使用 visibility：隐藏标签时不可见，但已分配空间。使用 显示：无，标签也不可见，但页面上没有分配空间。

在HTML中我们可以使用 hidden 属性隐藏指定的元素。当HTML中的 hidden (隐藏)属性设置为true时，该元素被隐藏，或者当值 false 时，该元素可见。

语法

使用 style.hidden 和 style.visibility 隐藏元素的一般语法如下。

使用 style.hidden

document.getElementById("element").style.display = "none";

使用 style.visibility

document.getElementById("element").style.visibility = "none";

现在，让我们看一些示例，以了解 javascript 中元素的隐藏。

Example1

在此示例中，我们将看到如何使用JavaScript的 style.display 属性删除元素。这里，有一个 div 元素和一个段落元素，它们在单击给定的HTML按钮。我们必须点击 "Click me!" 按钮才能看到效果。

<!DOCTYPE html>
<html>
<head>
<title>
style.display
</title>
</head>
<body>
<p>
Welcome to the lidihuo.com
</p>
<p>
Example of the JavaScript's style.display property
</p>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p id = "p"> This is a paragraph element. </p>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.display = "none";
document.getElementById("p").style.display = "none";
}
</script>
</body>
</html>

输出

Welcome to the lidihuo.com

Example of the JavaScript's style.display property

This is the div element.

This is a paragraph element.

Example2

在此示例中，我们将看到如何使用JavaScript的 style.visibliity 属性来隐藏元素。在这里，div元素和段落元素被隐藏，但是它们的空间仍然分配。

我们必须单击 'Click me!'按钮以查看效果。

<!DOCTYPE html>
<html>
<head>
<title>
style.visibility
</title>
</head>
<body>
<p>
Welcome to the lidihuo.com
</p>
<p>
Example of the JavaScript's style.visibility property
</p>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p id = "p"> This is a paragraph element. </p>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("p").style.visibility = "hidden";
}
</script>
</body>
</html>

输出

Welcome to the lidihuo.com

Example of the JavaScript's style.visibility property

This is the div element.

This is a paragraph element.

Example3

在此示例中，我们同时使用了 style.display 和 style.visibility JavaScript属性，以查看两者之间的区别。在这里，有一个 div 元素和 <b> 标题元素。我们将在这些元素上应用属性。我们隐藏的div通过应用元件的style.display属性，和隐藏<b>通过将元件style.visibility属性。

我们必须点击 'Click me!" 按钮查看效果。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript hide elements
</title>
</head>
<body>
<p>
Welcome to the lidihuo.com
</p>
<p>
Using both style.visibility and style.display properties
</p>
<div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<p> This is a paragraph element. </p>
<b id = "heading"> This is the heading after the paragraph element. </b>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("heading").style.display = "none";
}
</script>
</body>
</html>

输出

Welcome to the lidihuo.com

Using both style.visibility and style.display properties

This is the div element.

This is a paragraph element.

This is the heading after the paragraph element.

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< JavaScript getAttribute() JavaScript hint() >>

昵称：邮箱：