如何在 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
,並可以對其進行操作。