在整个网页开发过程中，用户需要隐藏或显示一些元素。这些元素可以是一个按钮，一些动画，或一个导航栏等等。大多数时候，用户希望一个按钮或一个导航栏在桌面上是可见的，但在移动端上却不可见。
通过JavaScript，用户可以根据用户的行为轻松地隐藏或显示网页上的某个元素。在这篇文章中，我们将看到JavaScript是如何用于这个目的的。
在JavaScript中隐藏和显示元素
使用JavaScript，我们可以在网页上隐藏或显示一个元素，使用:
- style.display
- style.visibility
让我们通过例子分别了解它们，然后比较它们之间的区别。
如何在JavaScript中使用style.display。display属性代表一个应该在你的网页上显示的元素。使用这个用户可以隐藏整个元素，页面的建立就像之前的元素根本不存在一样。
语法。
document.getElementById("id-of-element").style.display = "";
这里用逗号表示，应该定义一个是否显示内容的值。下面是一个例子。
要隐藏元素：style.display = "none"
<!DOCTYPE html>
<html>
<body>
<p>Click the "Hide Me" button to hide the DIV element:</p>
<div id = "div" >
<img src="img1.jpg" alt="" width="300 px" height="300 px">
This is an apple
</div>
<button onclick="myFunction()">Hide Me</button>
<script>
function myFunction() {
document.getElementById("div").style.display = "none";
}
</script>
</body>
</html>
当用户点击按钮时，该函数被调用以隐藏该元素。这是通过给style.display分配none值来完成的。
现在看看输出，按钮是如何占据图片的空间的。这就是display的工作原理，它完全隐藏了元素，并重建了页面，就好像这个元素一开始就不在那里。
要显示一个元素：style.display = "" 或 "block"。
<!DOCTYPE html>
<html>
<body>
<p>Click the "Show me" button to show element the DIV element:</p>
<div id = "div" >
<img src="img2.jpg" id ="div2" alt="" width="300 px" height="300 px" style="display:none">
</div>
<button onclick="myFunction()">Show Me</button>
<script>
function myFunction() {
document.getElementById("div2").style.display = '';
}
</script>
</body>
</html>
现在，类似地，为了显示元素，按钮移动并提供空间给元素，当显示从style.display ="none "改变为style.display =""。
通过这些方式，该元素将被显示或完全隐藏，而不仅仅是其可见性。页面将根据这些行为重新构建。
如何在JavaScript中使用style.visibility。style visibility的工作方式类似，但不同的是，只有元素的可见性从屏幕阅读器那里被隐藏。这意味着该元素不会从页面流中移除，从而在页面上为其留出空间。
语法
document.getElementById("id-of-element").style.visibility = "";
这里用逗号表示，对于是否显示内容，应该定义一个 "隐藏 "或""的值。为了更好地理解这一点，这里有一个例子。
<!DOCTYPE html>
<html>
<body>
<p id="div">This is a paragraph.</p>
<button type="button" onclick="myFunction()">Hide content of paragraph</button>
<p id="div2">This is another paragraph.</p>
<script>
function myFunction() {
document.getElementById("div").style.visibility = "hidden";
}
</script>
</body>
</html>
现在，在这里，当按钮被点击以隐藏可见性时，它只是为浏览者的眼睛隐藏了它。
在这里，网页上的空间没有被该元素占据。这显示了style.display和style.visibility的不同。
总结
每个人都想在他们的网页上隐藏或显示一些特定的元素。在这个指南中，我们学习了用JavaScript来改变网页上元素的可见性的方法。有两种具体的方法，但它们彼此之间略有不同。使用style.display，内容被隐藏，其空间被其他内容占据。而使用style.visibility，内容只对读者隐藏，但它仍然存在，因为它的空间不能被其他元素占据。这对网页开发者来说非常有用，因为开发者希望一些内容被隐藏，一些内容根据观点被显示。
