如何在 jQuery 中检查元素是否被隐藏
Sundeep Dawadi
2023年1月30日
2020年9月26日
任何 DOM 中的对象都可以通过将其 CSS 属性 display
指定为 none
来隐藏。
用 jQuery 检查元素是否被隐藏的方法
首先,我们创建一个标题元素 <h1>
,并应用内联 CSS 属性来隐藏它。
<h1 style="display:none;">Your text here</h1>
在 jQuery 中,有两个可见性过滤器 - :hidden
和 :visible
选择器。它们分别指定元素是否隐藏和可见。可以通过下面的方法轻松检查。
<script>
$(document).ready(function(){
//checks if document is ready
if($("h1").is(":hidden")){
alert("The heading is hidden.");
//your function here
}
if($("h1").is(":visible"){
alert("The heading is visible.");
}
});
</script>
它给出了一个警告说: The heading is hidden.
注意
如果你放置了多个元素,其中一个是隐藏的,另一个是可见的,它同时触发
is(":visible")
和 is(":hidden")
。了解 jQuery 中的:hidden
选择器
:hidden
选择器基于以下原因将一个元素标识为隐藏。
- 它的 CSS
display
属性的值为none
。 - 该元素是一个带有
type="hidden"
的表单元素。 - 该元素的
height
和width
值显示设置为 0。 - 父元素是隐藏的。
所以,CSS visibility
属性设置为 hidden
或 opacity
属性设置为 0
的元素,在 jQuery 中被认为是可见的,因为它们仍然占用 DOM 中的空间。
另外,如果要检查元素的具体 CSS 属性是否被隐藏,我们可以使用以下方法。
<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>
快速检查元素是否隐藏的技巧
jQuery 不能利用原生 DOM 的 querySelectorAll()
方法。它还会产生一些性能问题,因为它迫使浏览器重新渲染页面以确定可见性。所以与其使用元素,不如使用类或 CSS 选择器,然后使用 .find(":hidden")
。
<h1 style="display:none;">Your text here</h1>
<script>
$(document).ready(function(){
var hiddenHeadings = $("body").find(":hidden").is("h1");
if(hiddenHeadings.length > 0){
alert("There is atleast one heading hidden.");
}
});
</script>
在这里可以直接访问 hiddenHeadings
,并可以对其进行操作。