Categories
JavaScript

JavaScript中的隐藏元素

JavaScript隐藏元素

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

在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中元素的隐藏。

例1

在此示例中,我们将看到如何使用JavaScript的style.display属性删除元素。这里,有一个div元素和一个paragraph元素,它们在单击给定的HTML按钮时会隐藏。我们必须点击“点击我!”按钮以查看效果。

<!DOCTYPE html>
<html>
<head>
<title>
style.display
</title>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Example of the JavaScript's style.display property
</h2>

<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>

输出量

执行后,输出将是-

点击按钮后,输出将为-

例2

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

我们必须点击“点击我!”按钮以查看效果。

<!DOCTYPE html>
<html>
<head>
<title>
style.visibility
</title>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Example of the JavaScript's style.visibility property
</h2>

<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>

输出量

执行上述代码后,输出为-

点击按钮后,输出将为-

例子3

在此示例中,我们同时使用style.display和style.visibility JavaScript属性来查看它们之间的区别。这里有一个div元素,<h3>我们要在其上应用属性的标题元素。我们通过应用style.display属性来隐藏div元素,并隐藏<h3>元素,通过应用style.visibility属性。

我们必须点击“点击我!”按钮以查看效果。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript hide elements
</title>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Using both style.visibility and style.display properties
</h2>

<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>
<h3 id = "heading"> This is the heading after the paragraph element. </h3>
<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>

输出量

在输出中,我们可以看到div元素(已在其上应用了style.visibility属性)处于隐藏状态,但仍在分配空间。但是标题(我们在其上应用了style.display属性)隐藏并且未分配任何空间。

点击按钮后,结果将是-

蜀ICP备20006366号
error: 内容受到保护 !!