JavaScript教程-JavaScript 隐藏元素
在 JavaScript 中，我们可以使用 style.display 或者 style.visibility 来隐藏元素。visibility 属性也可以用来隐藏元素。style.display 和 style.visibility 之间的区别在于，使用 visibility: hidden，元素不可见，但是分配了空间。使用 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 元素和一个段落元素，在点击给定的 HTML 按钮 后，它们会隐藏。我们需要点击 'Click me!' 按钮以看到效果。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> JavaScript 隐藏元素 </h1>
<h3> 这里可以看到 "a == 4" 被跳过。 </h3>
<p id="para">
</p>
<script>
var res = "";
var a;
for (a = 1; a <= 7; a++) {
if (a == 4) {
continue;
}
res += "a的值为: " + a + "<br>";
}
document.getElementById("para").innerHTML = res;
</script>
</body>
</html>示例2
在这个示例中，我们将看到如何通过使用 JavaScript 的 style.visibility 属性来隐藏元素。在这里，一个 div 元素和一个段落元素被隐藏，但它们的空间仍然被分配。
我们需要点击 'Click me!' 按钮以看到效果。
<!DOCTYPE html>
<html>
<head>
<title> JavaScript 隐藏元素 </title>
</head>
<body>
<h1> JavaScript 隐藏元素 </h1>
<h3> 可以看到 "Magenta" 和 "Skyblue" 被跳过。 </h3>
<script>
var rainbow = ["Violet", "Indigo", "Magenta", "Blue", "Skyblue", "Green", "Yellow", "Orange", "Red"];
var i = 0;
var res = "";
while (i < rainbow.length){
if (rainbow[i] == "Magenta" || rainbow[i] == "Skyblue") {
i++;
continue;
}
res = "";
res += rainbow[i] + "<br>";
i++;
document.write(res);
}
</script>
</body>
</html>示例3
在这个示例中，我们同时使用了 style.display 和 style.visibility 这两个 JavaScript 属性，以查看它们之间的区别。在这里，有一个 div 元素和一个 标题 元素 <h3>，我们在这两个元素上应用了这两个属性。我们通过应用 style.display 属性隐藏了 div 元素，并通过应用 style.visibility 属性隐藏了 <h3> 元素。
我们需要点击 'Click me!' 按钮以看到效果。
<!DOCTYPE html>**>**
<html>
<head>
<title> JavaScript 隐藏元素 </title>
</head>
<body>
<h1> JavaScript 隐藏元素 </h1>
<h3> 使用了 style.visibility 和 style.display 属性 </h3>
<div id="div" style="background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
这是一个 div 元素。
</div>
<p> 这是一个段落元素。 </p>
<h3 id="heading"> 这是段落元素之后的标题。 </h3>
<button onclick="fun()" id="btn">
点我！
</button>
<script>
function fun() {
document.getElementById("div").style.visibility = "hidden";
document.getElementById("heading").style.display = "none";
}
</script>
</body>
</html>输出
在输出中，我们可以看到通过应用 style.visibility 属性隐藏的 div 元素仍然占用空间。但通过应用 style.display 属性隐藏的标题则不占用任何空间。
