jQuery : différence entre visible et hidden

Je voulais tester si un élément est visible, ou non, en jQuery.

Après quelques recherches sur le net, on tombe souvent sur des exemples comme cela :

if ( $("#monid").is(':visible')) {
...
}

C’est une grossière erreur.

Voici l’explication, et le principe qu’il faut avoir en tête :

Lorsqu’on cache ou qu’on montre un élément avec jQuery ou jQueryUI, cela va presque toujours modifier la propriété display (display:none, display:block, etc).

La propriété visible est complètement différente, et est utilisée pour cacher un élément, mais en gardant la place qu’elle occupe.

Pour vérifier si quelque chose est « caché » (notez la subtilité avec la différence de « pas visible« ) il faut vérifier la propriété css display.

Exemple concret :

if ( $("#monid").css('display')!='none') {
...
}

6 comments

  1. Ping : Chroniques jQuery, épisode 64 | MathieuRobin.com
  2. Manu

    Je ne suis pas d’accord ou alors je n’ai rien compris le sens de l’article. Pour moi, le selector « :visible » vérifie la propriété css display.
    Si display: none, alors .is(« :visible ») retourne false, et inversement si display: block, ou autre.
    Pour la propriété css visibility, là il faut passer par la propriété css.
    Le jsFiddle qui explique tout ça (http://jsfiddle.net/boucman/yg8Ba/9/).

  3. Olivier Pons

    Si tu ne comprends pas, alors j’ai un bon lien : je n’arrivais pas, en utilisant « if ( $("#monid").is(':visible')) { ... } » à vérifier s’il était visible. Le problème, c’est que des fois ça fonctionne mais pas tout le temps.

    Et j’ai même un exemple concret, le mien, ou ça ne fonctionne pas, ici : http://jsfiddle.net/uRhuK/. En fait ça fonctionne une fois quand tu clique sur les éléments, mais si tu re-clique dessus, ça ne fonctionne plus !

    Pourquoi ?
    Parce que ce code ne fonctionne pas : « if ( $("#monid").is(':visible')) { ... } »

    J’ai donc posé la question ici et si tu lis bien le détail des réponses, les gens l’expliquent, et peut-être que leur explication sera plus compréhensible que la mienne.

    J’espère que ce lien t’aidera plus 😉 .

  4. Manu

    Salut,
    Je reviens vers toi car cette histoire de visible me trottait dans la tête.
    Je viens de regarder directement dans le code de jQuery pour voir ce que les selectors « :visible » et « :hidden » faisaient. Sachant que le selector « visible » retourne l’inverse du selector « :hidden ».

    Dans ton article tu dis que le selector « :visible » ne vérifie pas la propriété css « display » et qu’il concerne les éléments cachés gardant la place qu’ils occupent.
    Mais au contraire, pour vérifier que l’élément est caché, il vérifie la propriété css « display » est égale à « none » ou que la hauteur ou la largeur de l’élément est égale à 0.

    Pour ce qui est de ton exemple sur jsFiddle, de mon côté il fonctionne très bien.

    • Olivier Pons

      Bonsoir !

      Je te copie colle l’idée de la réponse que j’ai donnée dans le lien de ma réponse précédente:

      Showing/hiding with jQuery or jQueryUI will pretty much always modify the display property (display:none, display:block, etc). Visible is a different property entirely, and is used to hide an element but keep its area occupied.
      So to check if something is hidden, or if you are going to hide something yourself, you should almost always check the display css property and not visible

      C’est à partir de là que j’ai fait mon article… donc si je me suis trompé quelque part, je ne vois pas trop où…

  5. Manu

    Bonjour,

    Visible n’est pas une propriété mais un selector. Je pense alors qu’il voulait parler plutôt de la propriété visibility, qui, certes, masque un élément en gardant la place qu’il occupe. Mais ça n’a rien à voir avec le selector « :visible » de jQuery qui lui vérifie la propriété css display. Il n’y a qu’a regarder dans le code source (lien dans mon commentaire ci-dessus).

    Je commence à me dire qu’il y a un gros quiproquo mais je ne vois pas où 😉

Poster un commentaire

Vous devriez utiliser le HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>