如何使用 JavaScript 隐藏 HTML 元素?
javascriptobject oriented programmingfront end technology更新于 2024/5/19 8:27:00
在本教程中，我们将学习如何使用 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 元素。
使用 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 元素。
Click the "Hide Element" button to hide the div element.
使用 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 隐藏元素。
Click the "Hide Element" button to hide the div element.
在上面的输出中，用户可以看到元素使用 style.visibility 属性被隐藏，但元素仍然占据着浏览器中的空间。
在本教程中，我们学习了三种使用 JavaScript 隐藏元素的方法。第一种方法是使用元素的 hidden 属性。第二种方法是将 style.display 属性设置为"hidden"。第三种方法是将 style.visibility 属性设置为"hidden"。
相关文章
说出 javascript 中的一些字符串方法?
为什么在 javascript 中使用带有数组迭代的"for…in"是个坏主意?
JavaScript RegExp W 元字符
JavaScript RegExp s 元字符
Javascript 在集合中搜索对象键
为什么循环引用在 javascript 中是坏的?
JavaScript Array#sort() 函数使用哪种算法?
javascript 中 push() 和 unshift() 方法的区别
JavaScript 中元素的类属性节点的值?
JavaScript 中的 setInterval() 方法是什么?
打印
下一节 ❯❮ 上一节