如何在 jQuery 中檢查元素是否被隱藏

1. 用 jQuery 檢查元素是否被隱藏的方法
2. 瞭解 jQuery 中的:hidden 選擇器
3. 快速檢查元素是否隱藏的技巧

任何 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.

瞭解 jQuery 中的:hidden 選擇器

:hidden 選擇器基於以下原因將一個元素標識為隱藏。

1. 它的 CSS display 屬性的值為 none。
2. 該元素是一個帶有 type="hidden"的表單元素。
3. 該元素的 height 和 width 值顯示設定為 0。
4. 父元素是隱藏的。

所以，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，並可以對其進行操作。