Comment vérifier si un élément est masqué dans jQuery

1. Méthode pour vérifier si un élément est caché dans jQuery
2. Comprendre le sélecteur :hidden dans jQuery
3. Conseils rapides pour vérifier si un élément est caché

Tout objet dans le DOM peut être masqué en attribuant à sa propriété CSS display la valeur none.

Méthode pour vérifier si un élément est caché dans jQuery

Tout d’abord, nous créons un élément d’en-tête <h1> et appliquons une propriété CSS en ligne pour le cacher.

<h1 style="display:none;">Your text here</h1>

Dans jQuery, il y a deux filtres de visibilité - les sélecteurs :hidden et :visible. Ils spécifient si l’élément est caché et visible, respectivement. Il peut être facilement vérifié par la méthode suivante.

<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>

Il donne une alerte disant: The heading is hidden..

Comprendre le sélecteur :hidden dans jQuery

Le sélecteur :hidden identifie un élément comme étant caché pour les raisons suivantes:

1. Il a la propriété CSS “display” avec une valeur de none.
2. L’élément est un élément de formulaire avec type="hidden".
3. Les valeurs height et width de l’élément sont explicitement fixées à 0.
4. L’élément parent est caché.

Ainsi, les éléments dont la propriété CSS visibility est fixée à hidden ou la propriété opacity à 0 sont considérés comme visibles dans jQuery car ils consomment encore de l’espace dans le DOM.

Alternativement, pour vérifier la propriété CSS spécifique de l’élément afin de vérifier s’il est caché, nous pouvons utiliser la méthode suivante.

<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>

Conseils rapides pour vérifier si un élément est caché

jQuery ne peut pas tirer profit de la méthode native DOM querySelectorAll(). Elle crée également des problèmes de performance car elle oblige le navigateur à redonner la page pour déterminer la visibilité. Donc, plutôt que d’utiliser des éléments, vous pouvez utiliser des classes ou des sélecteurs CSS et ensuite utiliser .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>

Ici, les hiddenHeadings sont directement accessibles et peuvent être utilisés.