JavaScript 隐藏元素

JavaScript 隐藏元素

在JavaScript中,我们可以通过使用 style.display 或者使用 style.visibility 来隐藏元素。JavaScript中的 visibility 属性也可以用于隐藏元素。 style.displaystyle.visibility 的区别在于使用 visibility: hidden 时,标签不可见,但空间被分配。使用 display: none 时,标签也不可见,但页面上没有分配空间。

在HTML中,我们可以使用 hidden 属性来隐藏指定的元素。当HTML中的 hidden 属性设置为true时,元素被隐藏;当值为 false 时,元素可见。

语法

使用 style.hiddenstyle.visibility 隐藏元素的一般语法如下所示。

使用 style.hidden

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

使用 style.visibility

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

现在,让我们来看一些示例,以了解在JavaScript中隐藏元素的方法。

示例1

在这个示例中,我们将看到如何使用JavaScript的style.display属性来移除元素。这里有一个

元素和一个段落元素,在点击给定的HTML按钮后隐藏。我们必须点击 ‘Click me!’ 按钮才能看到效果。

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

输出

执行后,输出结果将为 –

JavaScript 隐藏元素

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

输出

上述代码执行后,输出结果为 –

JavaScript 隐藏元素

点击按钮后,输出结果将是 –

JavaScript 隐藏元素

示例3

在这个示例中,我们同时使用了 style.displaystyle.visibility JavaScript 属性来观察它们之间的差异。这里有一个 div 元素和 <h3> 标题 元素,我们将这些属性应用于它们上面。我们通过应用 style.display 属性来隐藏 div 元素,并通过应用 style.visibility 属性来隐藏 <h3> 元素。

我们必须点击 ‘点击我!’ 按钮才能看到效果。

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

输出

在输出中,我们可以看到应用了 style.visibility 属性的 div 元素是隐藏的,但仍然分配空间。但是应用了 style.display 属性的标题是隐藏的并且不分配任何空间。

JavaScript 隐藏元素

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程