web-dev-qa-db-fra.com

Pourquoi jQuery affiche / cache utilise display: none au lieu de visibilité: caché?

display:none signifie que l'élément n'est pas rendu dans le cadre du DOM, il n'est donc pas chargé tant que la propriété d'affichage ne change pas.

visibility:hidden charge l'élément, mais ne l'affiche pas.

Pourquoi jQuery utilise display:none pour ses fonctions show/hide au lieu de basculer entre visibility:hidden et visibility:visible?

71
isayno

Parce que dans display:none, L'élément, à toutes fins utiles, cesse d'exister - il n'occupe aucun espace. Cependant, dans visibility:hidden, C'est comme si vous veniez d'ajouter opacity:0 À l'élément - il occupe la même quantité d'espace mais agit simplement comme invisible.

Les créateurs de jQuery pensaient probablement que le premier serait mieux adapté à .hide().

65
Salty

visibility: hidden rend un élément invisible mais ne le supprime pas de la mise en page de la page. Il laisse une boîte vide où se trouvait l'élément. display: none le supprime de la mise en page afin qu'il n'occupe pas d'espace sur la page, ce qui est généralement ce que les gens veulent lorsqu'ils cachent quelque chose.

18
John Kugelman

Visibilité: caché rend l'élément invisible d'une manière qui utilise toujours l'espace sur la page. Affichage: aucun ne fait que l'élément n'a pas d'espace et qu'il soit complètement disparu, alors qu'il existe toujours dans le DOM.

10
user142019

La visibilité rend simplement l'élément invisible, mais il prendrait encore de la place sur l'écran.

6
Seph

Visibility:hidden rend juste l'élément invisible mais il est chargé dans DOM donc il consomme du temps de chargement. Mais Display:none ne charge pas l'élément.

1
anil kumar