web-dev-qa-db-fra.com

Quelle est la différence entre visibilité: caché et affichage: aucun?

Les règles CSS visibility:hidden et display:none _ ont pour effet que l'élément n'est pas visible. Sont ces synonymes?

cssvisibility
1084
Chris Noe

display:none signifie que la balise en question n'apparaîtra pas du tout sur la page (bien que vous puissiez toujours interagir avec elle via le dom). Il n'y aura pas d'espace alloué pour cela entre les autres balises.

visibility:hidden signifie que contrairement à display:none, la balise n'est pas visible, mais de l'espace lui est alloué sur la page. La balise est rendue, elle n’est tout simplement pas visible sur la page.

Par exemple:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Remplacer [style-tag-value] par display:none a pour résultat:

test |   | test

Remplacer [style-tag-value] par visibility:hidden a pour résultat:

test |                        | test
1368
kemiller2002

Ils ne sont pas synonymes.

display:none supprime l'élément du flux normal de la page, permettant ainsi à d'autres éléments de se remplir.

visibility:hidden laisse l'élément dans le flux normal de la page tel qu'il occupe toujours de l'espace.

Imaginez que vous fassiez la queue pour faire un tour dans un parc d'attractions et que quelqu'un dans la file devienne si chahuté que la sécurité l'en empêche. Tout le monde en ligne avancera ensuite d’un poste pour occuper le poste maintenant vide. C'est comme display:none.

Comparez cela à la situation similaire, mais que quelqu'un devant vous met une cape d'invisibilité. En regardant la ligne, vous aurez l’impression qu’il y a un espace vide, mais les gens ne peuvent pas vraiment remplir cet espace vide car il y a toujours quelqu'un. C'est comme visibility:hidden.

215
user22151

Une chose à noter, même si cela n’a pas été demandé, c’est qu’il existe une troisième possibilité de rendre l’objet totalement transparent. Considérer:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

Dans ce cas, vous obtenez:

1st link.
2nd        link.
3rd        link.

La différence entre 1 et 2 a déjà été soulignée (à savoir, 2 occupe toujours de la place). Cependant, il existe une différence entre 2 et 3: dans le cas 3, la souris bascule toujours sur la main lors du survol du lien et l'utilisateur peut toujours cliquer sur le lien et les événements Javascript se déclencheront sur le lien. Ceci est généralement pas le comportement que vous souhaitez. Le comportement lors de la sélection de texte peut également varier selon les navigateurs.

98
Kip

display:none supprime l'élément du flux de présentation.

visibility:hidden le cache mais laisse de l'espace.

82
mmaibaum

Il y a une grande différence en ce qui concerne les nœuds enfants. Par exemple: Si vous avez un div parent et un div enfant imbriqué. Donc, si vous écrivez comme ceci:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

Dans ce cas, aucun des divs ne sera visible. Mais si vous écrivez comme ceci:

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

Alors la div enfant sera visible alors que la div parent ne sera pas affichée.

67
Govinda

Ce ne sont pas des synonymes - display: none supprime l'élément du flux de la page et le reste de la page s'écoule comme s'il n'y était pas.

visibility: hidden masque l'élément, mais pas le déroulement de la page, en lui laissant de la place sur la page.

17
ConroyP

display: none supprime entièrement l'élément de la page et la page est construite comme si l'élément n'y était pas du tout.

Visibility: hidden laisse un espace dans le flux de documents même si vous ne pouvez plus le voir.

Cela peut ou non faire une grande différence en fonction de ce que vous faites.

15
wcm

Avec visibility:hidden l'objet prend encore une hauteur verticale sur la page. Avec display:none, il est complètement supprimé. Si vous avez du texte sous une image et que vous faites display:none, ce texte se déplacera pour remplir l'espace où se trouvait l'image. Si vous faites de la visibilité: caché, le texte restera au même endroit.

11
Steven Williams

display:none masquera l'élément et réduira l'espace qu'il occupait, alors que visibility:hidden masquera l'élément et préservera l'espace des éléments. display: none affecte également certaines des propriétés disponibles à partir de javascript dans les anciennes versions de IE et de Safari.

9
slashnick

En plus de toutes les autres réponses, il existe une différence importante pour IE8: si vous utilisez display:none et essayez d'obtenir la largeur ou la hauteur de l'élément, IE8 renvoie 0 (alors que les autres navigateurs renverront les tailles réelles). IE8 renvoie la largeur ou la hauteur correcte uniquement pour visibility:hidden.

7
szeryf

visibility:hidden préserve l'espace; display:none non.

6
Pearl
display: none;

Il ne sera pas disponible sur la page et n'occupe aucun espace.

visibility: hidden;

il cache un élément, mais il occupera toujours le même espace qu'auparavant. L'élément sera masqué, mais affectera néanmoins la mise en page.

visibility: hidden préserve l'espace, alors que display: none ne préserve pas l'espace.

Affichage Aucun Exemple: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Exemple de visibilité masquée: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

6
Anu

Si la propriété de visibilité est définie sur "hidden", le navigateur prendra toujours de la place sur la page pour le contenu, même s'il est invisible.
Mais lorsque nous définissons un objet sur "display:none", le navigateur n'attribue pas d'espace sur la page pour son contenu.

Exemple:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Voir les détails

5
Shubelal Kumar

visibility:hidden conservera l'élément dans la page et occupera cet espace, mais ne le montrera pas à l'utilisateur.

display:none ne sera pas disponible dans la page et n'occupe aucun espace.

4
Ramesh

Une autre différence est que visibility:hidden fonctionne dans les navigateurs les plus anciens, et display:none ne fonctionne pas:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

3
Dave Burton

La différence va au-delà du style et se reflète dans le comportement des éléments lorsqu'ils sont manipulés avec JavaScript.

Effets et effets secondaires de display: none:

  • l'élément cible est sorti du flux de documents (n'affecte pas la présentation des autres éléments);
  • tous les descendants sont affectés (ne sont pas affichés non plus et ne peuvent pas "sortir" de cet héritage);
  • les mesures ne peuvent pas être effectuées pour l'élément cible ni pour ses descendants - elles ne sont pas rendues du tout, donc leur clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), tous renvoient 0s.

Effets et effets secondaires de visibility: hidden:

  • l'élément cible est masqué, mais n'est pas retiré du flux et affecte la présentation en occupant son espace normal;
  • innerText (mais pas innerHTML) de l'élément cible et des descendants renvoie une chaîne vide.
1
Adam Jagosz

display:none; n’affichera pas l’élément et n’attribuera pas d’espace à l’élément de la page, tandis que visibility:hidden; n’affichera pas l’élément sur la page, mais l’espace. Nous pouvons accéder à l'élément dans DOM dans les deux cas. Pour mieux le comprendre, veuillez regarder le code suivant: affichage: aucun vs visibilité: caché

1
Pritam Bohra