jQuery : comment vérifier si un élément est masqué ? (analyse pour débutants)

Introduction : pourquoi cette question préoccupe chaque développeur frontend

Imaginez la situation : vous écrivez une page interactive avec un menu déroulant, une fenêtre modale ou un accordéon. L'utilisateur clique sur un bouton, et le bloc doit apparaître ou disparaître en douceur. Mais que se passe-t-il si vous essayez accidentellement d'animer un élément déjà masqué ? Ou, au contraire, si vous affichez ce qui est déjà visible ? Le résultat : des bugs, une interface saccadée et des utilisateurs déçus.

C'est pourquoi la question "How do I check if an element is hidden in jQuery?" est l'une des plus populaires sur Stack Overflow. Plus d'un millier de réponses y ont été apportées, et ce n'est pas un hasard. Savoir déterminer correctement la visibilité d'un élément est une compétence de base qui vous fera gagner des heures de débogage.

Dans cet article, nous allons détailler comment vérifier avec jQuery si un élément est masqué. Vous découvrirez les pièges, les différences entre display:none et visibility:hidden, et apprendrez à écrire un code fiable. C'est parti !

La méthode .is(':hidden') — votre outil principal

La manière la plus simple et la plus courante de vérifier si un élément est masqué est d'utiliser la méthode .is() avec le pseudo-sélecteur :hidden. jQuery le fournit nativement.

Comment cela fonctionne

Le sélecteur :hidden en jQuery sélectionne les éléments qui :

\n
• Ont la propriété CSS display: none ;
\n
• Sont des éléments de type <input type="hidden"> ;
\n
• Ont une largeur et une hauteur égales à zéro (par exemple, width: 0; height: 0) ;
\n
• Sont des descendants d'un parent masqué (héritent de l'invisibilité).
\n

Voici à quoi ressemble la vérification la plus simple :

// Vérifions si l'élément avec l'id="myDiv" est masqué\nif ($('#myDiv').is(':hidden')) {\n    console.log('L\'élément est masqué !');\n} else {\n    console.log('L\'élément est visible.');\n}

Vérification de la visibilité avec .is(':visible')

Pour la logique inverse, utilisez le sélecteur :visible :

if ($('#myDiv').is(':visible')) {\n    console.log('L\'élément est visible sur la page.');\n}

Les deux approches fonctionnent rapidement et sont intuitives. Mais il y a une nuance : que se passe-t-il si l'élément est masqué avec visibility: hidden ou opacity: 0 ? jQuery considère ces éléments comme visibles, ce qui surprend souvent les débutants.

Les pièges : visibility: hidden et opacity: 0

De nombreux développeurs pensent à tort que :hidden réagit à toutes les façons de masquer un élément. Ce n'est pas le cas.

Exemple avec visibility: hidden

La propriété visibility: hidden rend un élément invisible, mais il occupe toujours de l'espace sur la page. jQuery considère un tel élément comme visible, car ses dimensions ne sont pas nulles.

<div id="myBox" style="visibility: hidden;">Je suis invisible mais j'occupe de l'espace</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

Exemple avec opacity: 0

Il en va de même pour la transparence :

<div id="transparentBox" style="opacity: 0;">Transparent, mais visible pour jQuery</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

Si votre code utilise fadeIn()/fadeOut() ou une animation de transparence, la vérification standard avec :hidden vous trahira. Dans ces cas, vous devez vérifier la propriété CSS spécifique.

Comment vérifier visibility: hidden ou opacity: 0

Lorsque vous devez savoir si un élément est masqué précisément avec ces propriétés, utilisez .css() :

Vérification de visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('L\'élément est masqué via visibi