Comment vérifier si un élément est caché dans jQuery?

Vous pouvez changer la visibilité des éléments en utilisant les fonctions .hide() , .show() ou .toggle() .

Comment testeriez-vous si un élément est visible ou caché?

6967
07 окт. Philip Morton a demandé 07 oct. 2008-10-07 16:03 2008 à 16h03 2008-10-07 16:03
@ 56 réponses
  • 1
  • 2

Puisque la question concerne un élément, ce code peut être plus approprié:

 // Checks css for display:[none|block], ignores visibility:[true|false] $(element).is(":visible"); // The same works with hidden $(element).is(":hidden"); 

Identique à la proposition des vingt , mais appliqué à un seul élément; et cela correspond à l'algorithme recommandé dans la FAQ jQuery

8594
07 окт. la réponse est donnée à Tsvetomir Tsonev le 07 oct. 2008-10-07 16:30 2008 à 16h30 2008-10-07 16:30

Vous pouvez utiliser le sélecteur hidden :

 // Matches all elements that are hidden $('element:hidden') 
border=0

Et sélecteur visible :

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. réponse donnée le 07 octobre 2008-10-07 16:16 2008 à 16h16 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

La méthode ci-dessus ne prend pas en compte la visibilité du parent. Pour afficher un parent, vous devez utiliser .is(":hidden") ou .is(":visible") .

Par exemple

 <div id="div1" style="display:none"> <div id="div2" style="display:block">Div2</div> </div> 

La méthode ci-dessus traitera div2 visible, et :visible pas. Mais ce qui précède peut être utile dans de nombreux cas, en particulier lorsque vous devez savoir s’il existe des erreurs de division visibles dans l’élément parent masqué, car dans ces conditions :visible ne fonctionnera pas.

831
07 окт. réponse donnée à Mote Oct 07. 2008-10-07 16:09 2008 à 16h09 2008-10-07 16:09

Aucune de ces réponses ne concerne ce que je comprends, et c’est la question que je cherchais: "Comment traiter des éléments avec visibility: hidden ?". Ni :visible , ni :hidden ne résoudront pas ce problème, car ils recherchent tous les deux le mappage dans la documentation. Autant que je sache, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment je l'ai résolu (sélecteurs jQuery standard, peut-être une syntaxe plus concise):

 $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state } else { // handle visible state } }); 
474
24 марта '11 в 21:44 2011-03-24 21:44 la réponse est donnée par aaronLile le 24 mars '11 à 21:44 2011-03-24 21:44

De Comment déterminer l'état de l'élément commuté?


Vous pouvez déterminer si un élément est compilé ou non à l'aide :hidden sélecteurs :visible et :hidden .

 var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden'); 

Si vous agissez simplement sur un élément en fonction de son apparence, vous pouvez simplement inclure :visible ou :hidden dans l'expression du sélecteur. Par exemple:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. la réponse est donnée par l' utilisateur574889 14 janvier 2011-01-14 00:13 '11 à 0:13 2011-01-14 00:13

Souvent, en vérifiant si quelque chose est visible ou non, vous irez immédiatement tout droit et vous ferez autre chose. La chaîne jQuery facilite les choses.

Ainsi, si vous avez un sélecteur et que vous souhaitez effectuer une action sur celui-ci, il peut utiliser filter(":visible") ou filter(":hidden") , puis le lier à l'action que vous voulez entreprendre.

Donc, au lieu d'une if , par exemple:

 if ($('#btnUpdate').is(":visible")) { $('#btnUpdate').animate({ width: "toggle" }); // Hide button } 

Ou plus efficace, mais encore plus moche:

 var button = $('#btnUpdate'); if (button.is(":visible")) { button.animate({ width: "toggle" }); // Hide button } 

Vous pouvez tout faire sur une seule ligne:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 la réponse est donnée Simon_Weaver 25 juillet 2009 à 13h21 2009-07-25 13:21

Sélecteur :visible après la documentation jQuery :

  • Ils ont none display valeur CSS.
  • Ce sont des éléments de formulaire avec type="hidden" .
  • Leur largeur et leur hauteur sont clairement définies sur 0.
  • L'élément parent est masqué. L'élément n'est donc pas affiché sur la page.

Les éléments avec visibility: hidden ou opacity: 0 sont considérés comme visibles, car ils occupent toujours de l'espace dans la présentation.

Ceci est utile dans certains cas et inutile pour d'autres, car si vous voulez vérifier si un élément est visible ( display != none ), en ignorant la visibilité des éléments parents, vous constaterez que l'exécution de .css("display") == 'none' se produit non seulement plus rapidement, mais retourne également l'exactitude de la visibilité.

Si vous souhaitez vérifier la visibilité au lieu de l’affichage, vous devez utiliser: .css("visibility") == "hidden" .

Notez également les notes jQuery supplémentaires :

Parce que :visible est une extension de jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant :visible ne peuvent pas tirer parti des améliorations de performances fournies par la méthode DOM querySelectorAll() . Pour obtenir les meilleures performances lorsque vous utilisez :visible pour sélectionner des éléments, commencez par sélectionner des éléments à l’aide du sélecteur CSS pur, puis utilisez .filter(":visible") .

De plus, si vous êtes inquiet au sujet des performances, vous devriez vérifier maintenant que vous me voyez ... afficher / masquer les performances (2010-05-04) et utilisez d'autres méthodes pour afficher et masquer les éléments.

206
25 нояб. La réponse est donnée par Pedro Rainho le 25 novembre. 2011-11-25 12:16 '11 à 12:16 2011-11-25 12:16

Cela fonctionne pour moi, et j'utilise show() et hide() pour rendre ma div cachée / visible:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 la réponse est donnée par Abiy le 06 juillet '11 à 23:19 2011-07-06 23:19

Comment fonctionnent la visibilité des éléments et jQuery

L'élément peut être masqué en utilisant display:none , visibility:hidden ou opacity:0 . La différence entre ces méthodes:

  • display:none masque l’article et n’occupe aucun espace;
  • visibility:hidden masque l'élément, mais il prend toujours de la place dans la mise en page;
  • opacity:0 masque l'élément en tant que "visible: masqué" et occupe toujours de l'espace dans la mise en page; la seule différence est que l'opacité permet à l'élément d'être partiellement transparent;

     if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); } 

    Méthodes de commutation jQuery utiles:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. la réponse est donnée par webvitaly 25 avril 2012-04-25 00:04 '12 à 00:04 2012-04-25 00:04

J'utiliserais la classe CSS .hide { display: none!important; } .hide { display: none!important; } .

Pour masquer / afficher, j'appelle .addClass("hide")/.removeClass("hide") . Pour vérifier la visibilité, j'utilise .hasClass("hide") .

C'est un moyen simple et direct de vérifier / masquer / afficher les éléments si vous ne prévoyez pas d'utiliser les .toggle() ou .animate() .

145
03 февр. réponse donnée par Evgeny Levin le 03 février 2012-02-03 19:04 '12 à 19:04 2012-02-03 19:04

Vous pouvez également le faire en utilisant javascript:

 function isRendered(domObj) { if ((domObj.nodeType != 1) || (domObj == document.body)) { return true; } if (domObj.currentStyle  domObj.currentStyle["display"] != "none"  domObj.currentStyle["visibility"] != "hidden") { return isRendered(domObj.parentNode); } else if (window.getComputedStyle) { var cs = document.defaultView.getComputedStyle(domObj, null); if (cs.getPropertyValue("display") != "none"  cs.getPropertyValue("visibility") != "hidden") { return isRendered(domObj.parentNode); } } return false; } 

Notes:

  • Fonctionne partout

  • Fonctionne pour les éléments imbriqués

  • Fonctionne pour les styles CSS et inline.

  • Aucun cadre requis

140
16 июля '12 в 22:18 2012-07-16 22:18 La réponse est donnée par Matt Brock le 16 juillet 2012 à 22h18. 2012-07-16 22:18

Vous pouvez simplement utiliser l'attribut hidden ou visible , par exemple:

 $('element:hidden') $('element:visible') 

Ou vous pouvez simplifier la même chose avec ce qui suit.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 la réponse est donnée à ScoRpion le 23 mai 2012 à 15h59 . 2012-05-23 15:59

Une autre réponse à prendre en compte: si vous masquez un élément, vous devez utiliser jQuery , mais au lieu de le cacher, vous supprimez l’élément entier, mais vous copiez son code HTML et la balise elle-même dans la variable jQuery, puis vous devez faire un test s’il existe une telle balise à l’écran, en utilisant la valeur habituelle if (!$('#thetagname').length) .

110
22 апр. la réponse est donnée par think123 le 22 avril 2012-04-22 02:40 '12 à 2:40 2012-04-22 02:40

Lien de démonstration

Source:

Blogger Plug n Play - Outils et widgets jQuery: Comment savoir si un élément est masqué ou visible à l'aide de jQuery

105
25 янв. Answer is Code Spy 25 janvier 2013-01-25 08:34 '13 à 8:34 2013-01-25 08:34

ebdiv devrait être réglé sur style="display:none;" Cela fonctionne à la fois pour montrer et cacher:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 la réponse est donnée par Vaishu le 13 juin '12 à 16h20 . 2012-06-13 16:20

Lors du test d'un élément avec un sélecteur :hidden dans jQuery, il convient de prendre en compte le fait qu'un élément avec un emplacement absolu peut être reconnu comme étant masqué, bien que ses éléments enfants soient visibles .

Au début, cela semble quelque peu contre-intuitif - même si un examen plus approfondi de la documentation jQuery fournit des informations pertinentes:

Les éléments peuvent être considérés comme cachés pour plusieurs raisons: [...] Leurs largeur et hauteur sont clairement définies sur 0. [...]

Cela a donc tout son sens pour le modèle de boîte et le style calculé pour l'élément. Même si la largeur et la hauteur ne sont pas explicitement définies sur 0, elles peuvent être définies implicitement.

Regardez l'exemple suivant:

 .foo { position: absolute; left: 10px; top: 10px; background: #ff0000; } .bar { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: #0000ff; } 
http://jsfiddle.net/pM2q3/7/ 

Le même JS aura cette sortie:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 la réponse est donnée conceptdeluxe 06 mai 14 à 13:50 2014-05-06 13:50

Ça peut marcher:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 la réponse est donnée par Maneesh Kumar le 20 juillet 2012 à 15:44 2012-07-20 15:44

Exemple:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="checkme" class="product" style="display:none"> <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish <br>Product: Salmon Atlantic <br>Specie: Salmo salar <br>Form: Steaks </div> 
62
28 окт. réponse donnée par Irfan DANOIS le 28 oct. 2013-10-28 09:43 '13 à 9:43 2013-10-28 09:43

Pour vérifier si ce n'est pas visible, je l'utilise ! :

 if ( !$('#book').is(':visible')) { alert('#book is not visible') } 

Ou ce qui suit: sam, en conservant le sélecteur jQuery dans une variable afin d’améliorer les performances lorsque vous en avez besoin plusieurs fois:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 la réponse est donnée par Matthias Wegtun le 04 juin 13 à 04:42 2013-06-04 16:42

Utilisez la commutation de classe, pas la modification de style.,.

L'utilisation de classes conçues pour "masquer" des éléments est simple et constitue l'une des méthodes les plus efficaces. Changer la classe 'masqué' avec le type d' Display 'aucun' sera plus rapide que l'édition directe de ce style. J'ai expliqué en détail certaines de ces questions dans la question de la rotation de deux éléments visibles / cachés dans la même div .


Recommandations JavaScript et optimisation

Voici une vidéo vraiment instructive sur Google Tech Talk de l’ingénieur en chef de Google, Nicholas Zakas:

59
19 июля '13 в 0:17 2013-07-19 00:17 la réponse est donnée déséquilibrée le 19 juillet 2013 à 0:17 2013-07-19 00:17

Exemple d'utilisation du contrôle visible pour un bloc d'annonces:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ad-placement" id="ablockercheck"></div> <div id="ablockermsg" style="display: none"></div> 

"ablockercheck" est un identifiant qui bloque un bloc. Par conséquent, en cochant cette case, si elle est visible, vous pouvez détecter si le bloc d'annonces est activé.

55
27 апр. la réponse est donnée à Roman Losev le 27 avril. 2015-04-27 10:57 '15 à 10h57 2015-04-27 10h57

En fin de compte, aucun des exemples ne me convient, alors j'ai écrit le mien.

Tests (sans filter:alpha support Internet Explorer filter:alpha ):

a) Vérifiez si le document est caché

b) Vérifiez si l'élément a zéro largeur / hauteur / opacité ou display:none / visibility:hidden dans les styles intégrés.

c) Assurez-vous que le centre (également parce qu'il est plus rapide que de tester chaque pixel / coin) de l'élément n'est pas caché par un autre élément (et tous les ancêtres, par exemple: overflow:hidden masque / défilement / un élément sur l'autre) ou écran de bord

d) Vérifier si l'élément a une largeur / hauteur / opacité ou un display:none nuls display:none / visibilité: masqué dans les styles calculés (parmi tous les ancêtres)

Testé

Android 4.4 (navigateur personnel / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (modes Internet Explorer 5-11 et Internet Explorer 8 sur une machine virtuelle). ), Safari (Windows / Mac / iOS)

 var is_visible = (function () { var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0, y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0, relative = !!((!x  !y) || !document.elementFromPoint(x, y)); function inside(child, parent) { while(child){ if (child === parent) return true; child = child.parentNode; } return false; }; return function (elem) { if ( document.hidden || elem.offsetWidth==0 || elem.offsetHeight==0 || elem.style.visibility=='hidden' || elem.style.display=='none' || elem.style.opacity===0 ) return false; var rect = elem.getBoundingClientRect(); if (relative) { if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false; } else if ( !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) || ( rect.top + elem.offsetHeight/2 < 0 || rect.left + elem.offsetWidth/2 < 0 || rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) || rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth) ) ) return false; if (window.getComputedStyle || elem.currentStyle) { var el = elem, comp = null; while (el) { if (el === document) {break;} else if(!el.parentNode) return false; comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle; if (comp  (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined'  comp.opacity != 1))) return false; el = el.parentNode; } } return true; } })(); 

Comment utiliser:

 is_visible(elem) // boolean 
55
09 апр. la réponse est donnée à Aleko 09 avril. 2014-04-09 20:06 14 à 20:06 2014-04-09 20:06

Vous devez vérifier les deux ... Affichage ainsi que la visibilité:

 if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") { // The element is not visible } else { // The element is visible } 

Si nous vérifions $(this).is(":visible") , jQuery vérifie automatiquement les deux choses.

50
31 янв. la réponse est donnée par Premshankar Tiwari le 31 janvier 2014-01-31 09:24 14 à 09:24 2014-01-31 09:24

Peut-être que vous pouvez faire quelque chose comme ça.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. réponse donnée par Mathias Stavrou 07 avril 2015-04-07 15:26 '15 à 15:26 2015-04-07 15:26

Comme les Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (comme décrit pour jQuery: sélecteur visible ), nous pouvons vérifier si l'élément est visible de la manière suivante:

 function isElementReallyHidden (el) { return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0; } var booElementReallyShowed = !isElementReallyHidden(someEl); $(someEl).parents().each(function () { if (isElementReallyHidden(this)) { booElementReallyShowed = false; } }); 
32
19 марта '14 в 15:42 2014-03-19 15:42 la réponse est donnée par Andron le 19 mars '14 à 15:42 2014-03-19 15:42
 if($('#postcode_div').is(':visible')) { if($('#postcode_text').val()=='') { $('#spanPost').text('\u00a0'); } else { $('#spanPost').text($('#postcode_text').val()); } 
30
15 нояб. la réponse est donnée par Gaurav le 15 nov. 2013-11-15 13:41 13 à 13:41 2013-11-15 13:41

Mais que se passe-t-il si l'élément CSS ressemble à ceci?

 .element{ position: absolute;left:-9999; } 

C'est donc la réponse à la question de débordement de pile. Comment vérifier si un élément est hors écran doit également être pris en compte.

30
23 авг. la réponse est donnée par RN Kushwaha 23 août. 2014-08-23 23:53 14 à 23:53 2014-08-23 23:53

Il suffit de vérifier la visibilité en vérifiant la valeur logique, par exemple:

 if (this.hidden === false) { // Your code } 

J'ai utilisé ce code pour chaque fonction. Sinon, vous pouvez utiliser is(':visible') pour vérifier la visibilité de l'élément.

30
11 авг. la réponse est donnée pixellabme 11 août. 2014-08-11 08:28 '14 à 8:28 2014-08-11 08:28

Une fonction peut être créée pour vérifier les attributs de visibilité / affichage afin de déterminer si un élément est affiché ou non dans l'interface utilisateur.

 function checkUIElementVisible(element) { return ((element.css('display') !== 'none')  (element.css('visibility') !== 'hidden')); } 

Script de travail

29
29 авг. la réponse est donnée V31 29 août. 2014-08-29 23:20 14 à 23:20 2014-08-29 23:20

Il existe également une expression conditionnelle ternaire permettant de vérifier l'état de l'élément, puis de le basculer:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. réponse donnée par cssimsek le 06 nov. 2013-11-06 02:32 '13 à 2:32 2013-11-06 02:32
  • 1
  • 2

Autres questions sur les étiquettes ou Poser une question