如何使用 JavaScript 隐藏 HTML 元素？
在本教程中，我们将学习如何使用 JavaScript 隐藏 HTML 元素。
在 JavaScript 中，可以通过不同的方式隐藏 HTML 元素。在本教程中，我们将了解三种最流行的隐藏 HTML 元素的方法 -
- 使用 hidden 属性
- 使用 style.display 属性
- 使用 style.visibility 属性
通常，我们使用 hidden 属性来隐藏特定元素。我们可以通过将 hidden 属性值分别设置为 true 或 false 来在隐藏和显示元素之间切换。
在其他两种方式中，我们使用元素的 style 对象。 style 对象中有两个属性可以隐藏 HTML 元素，一个是 display，另一个是visibility。
在 JavaScript 中，我们可以使用这两个属性来隐藏 HTML 元素，但两者的主要区别在于，当我们使用 style.visibility 属性时，特定标签不可见，但标签的空间仍会分配。而在 style.display 属性中，不仅标签被隐藏，而且没有为该元素分配空间。
使用 hidden 属性
在 JavaScript 中，元素的 hidden 属性用于隐藏元素。我们将 hidden 属性值设置为 true 以隐藏元素。
语法
以下是使用 hidden 属性的语法 −
document.getElementById('element').hidden = true
在上述语法中，"element"是 HTML 元素的 id，通过使用 document.getElementById() 方法，我们访问元素并将其 hidden 属性更改为 true 以隐藏元素。
示例
在下面的示例中，我们使用了 hidden 属性通过 JavaScript 隐藏 div 元素。
<html> <body> <div id="dip"> Click the below buttons to hide or show this text. </div><br> <button onclick="hide()"> Hide Element </button> <button onclick="show()"> Show Element </button> <script> function hide() { document.getElementById('dip').hidden = true } function show() { document.getElementById('dip').hidden = false } </script> </body> </html>
使用 style.display 属性
在 JavaScript 中，style.display 属性也用于隐藏 HTML 元素。它可以具有"block"、"inline"、"inline-block"等值，但用于隐藏元素的值为"none"。使用 JavaScript，我们将 style.display 属性值设置为"none"以隐藏 html 元素。
语法
以下是在 JavaScript 中使用 style.display 属性隐藏 HTML 元素的语法。
document.getElementById('element').style.display = 'none'
在上述语法中，"element"是 HTML 元素的 id，通过使用 document.getElementById() 方法，我们访问该元素并将其 style.display 属性更改为"none"以隐藏该元素。
示例
在下面的示例中，我们使用了 style.display 属性使用 JavaScript 隐藏 div 元素。
<html> <style> #myDIV { width: 630px; height: 300px; background-color: #F3F3F3; } </style> <body> <p> Click the "Hide Element" button to hide the div element. </p> <button onclick="hide()"> Hide Element </button> <div id="myDIV"> Hello World! This is DIV element </div> <script> function hide() { document.getElementById('myDIV').style.display = 'none' } </script> </body> </html>
使用 style.visibility 属性
在 JavaScript 中，style.visibility 属性也用于隐藏 HTML 元素。它可以具有"visible"、"collapse"、"hidden"、"initial"等值，但用于隐藏元素的值为"hidden"。使用 JavaScript，我们将 style.visibility 属性值设置为"hidden"以隐藏 html 元素。
语法
以下是在 JavaScript 中使用 style.visibility 属性隐藏 HTML 元素的语法 -
document.getElementById('element').style.visibility = 'hidden'
在上述语法中，"element"是 HTML 元素的 id，通过使用 document.getElementById() 方法，我们访问该元素并将其 style.visibility 属性更改为"hidden"以隐藏该元素。
示例
在下面的示例中，我们使用 style.visibility 属性通过 JavaScript 隐藏元素。
<html> <style> #dip { width: 630px; height: 300px; background-color: #F3F3F3; } </style> <body> <p> Click the "Hide Element" button to hide the div element. </p> <button onclick="hide()"> Hide Element </button> <button onclick="show()"> Show Element </button> <div id="dip"> Hello World! This is DIV element </div> <script> function hide() { document.getElementById('dip').style.visibility = 'hidden'; } function show() { document.getElementById('dip').style.visibility = 'visible'; } </script> </body> </html>
在上面的输出中，用户可以看到元素使用 style.visibility 属性被隐藏，但元素仍然占据着浏览器中的空间。
在本教程中，我们学习了三种使用 JavaScript 隐藏元素的方法。第一种方法是使用元素的 hidden 属性。第二种方法是将 style.display 属性设置为"hidden"。第三种方法是将 style.visibility 属性设置为"hidden"。
