it-swarm.com.de

Was ist der Unterschied zwischen Sichtbarkeit: versteckt und Anzeige: keine?

Die CSS-Regeln visibility:hidden und display:none führen beide dazu, dass das Element nicht sichtbar ist. Sind das Synonyme?

1084
Chris Noe

display:none bedeutet, dass das betreffende Tag überhaupt nicht auf der Seite angezeigt wird (obwohl Sie weiterhin über den Dom damit interagieren können). Zwischen den anderen Tags wird kein Speicherplatz zugewiesen.

visibility:hidden bedeutet, dass das Tag im Gegensatz zu display:none nicht sichtbar ist, aber auf der Seite Platz dafür reserviert ist. Das Tag wird gerendert und ist nur auf der Seite nicht zu sehen.

Zum Beispiel:

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

Das Ersetzen von [style-tag-value] durch display:none führt zu:

test |   | test

Das Ersetzen von [style-tag-value] durch visibility:hidden führt zu:

test |                        | test
1368
kemiller2002

Sie sind keine Synonyme.

display:none entfernt das Element aus dem normalen Seitenfluss, sodass andere Elemente ausgefüllt werden können.

visibility:hidden belässt das Element im normalen Seitenfluss, sodass es noch Platz belegt.

Stellen Sie sich vor, Sie stehen für eine Fahrt in einem Vergnügungspark in der Schlange und jemand in der Schlange wird so laut, dass die Sicherheitspersonal ihn von der Schlange nimmt. Jeder in der Reihe rückt dann um eine Position vor, um den jetzt leeren Platz zu füllen. Das ist wie display:none.

Vergleichen Sie dies mit der ähnlichen Situation, aber dass jemand vor Ihnen einen Unsichtbarkeitsmantel anzieht. Beim Betrachten der Linie sieht es so aus, als gäbe es einen leeren Bereich, aber die Leute können diesen leeren Bereich nicht wirklich ausfüllen, weil noch jemand da ist. Das ist wie visibility:hidden.

215
user22151

Eine Sache, die es wert ist, hinzugefügt zu werden, ist, dass es eine dritte Möglichkeit gibt, das Objekt vollständig transparent zu machen. Erwägen:

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.

In diesem Fall erhalten Sie:

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

Auf den Unterschied zwischen 1 und 2 wurde bereits hingewiesen (2 nimmt nämlich noch Platz ein). Es gibt jedoch einen Unterschied zwischen 2 und 3: In Fall 3 wechselt die Maus immer noch zur Hand, wenn Sie den Mauszeiger über den Link halten, und der Benutzer kann immer noch auf den Link klicken, und JavaScript-Ereignisse werden weiterhin auf den Link ausgelöst. Dies ist normalerweise nicht das gewünschte Verhalten. Das Verhalten beim Auswählen von Text kann auch zwischen den Browsern variieren.

98
Kip

display:none entfernt das Element aus dem Layoutfluss.

visibility:hidden verbirgt es, verlässt aber den Raum.

82
mmaibaum

Es gibt einen großen Unterschied, wenn es um untergeordnete Knoten geht. Beispiel: Wenn Sie ein übergeordnetes und ein verschachteltes untergeordnetes Div haben. Also wenn du so schreibst:

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

In diesem Fall ist keine der Divs sichtbar. Aber wenn du so schreibst:

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

Dann wird das untergeordnete Div angezeigt, während das übergeordnete Div nicht angezeigt wird.

67
Govinda

Sie sind keine Synonyme - display: none entfernt das Element aus dem Seitenfluss, und der Rest der Seite fließt, als wäre es nicht da.

visibility: hidden verbirgt das Element vor der Ansicht, nicht jedoch den Seitenfluss, und lässt auf der Seite Platz für das Element.

17
ConroyP

display: none entfernt das Element vollständig von der Seite, und die Seite wird so erstellt, als ob das Element überhaupt nicht vorhanden wäre.

Visibility: hidden lässt den Platz im Dokumentenfluss, obwohl Sie ihn nicht mehr sehen können.

Dies kann einen großen Unterschied machen oder auch nicht, je nachdem, was Sie tun.

15
wcm

Mit visibility:hidden nimmt das Objekt immer noch vertikale Höhe auf der Seite ein. Mit display:none wird es komplett entfernt. Wenn Sie Text unter einem Bild haben und display:none ausführen, wird dieser Text nach oben verschoben, um den Platz zu füllen, an dem sich das Bild befand. Wenn Sie Sichtbarkeit haben: Verborgen bleibt der Text an derselben Stelle.

11
Steven Williams

display:none blendet das Element aus und reduziert den Platzbedarf, während visibility:hidden das Element blendet und den Platzbedarf des Elements beibehält. display: none wirkt sich auch auf einige der Eigenschaften aus, die in älteren Versionen von IE und Safari über JavaScript verfügbar sind.

9
slashnick

Zusätzlich zu allen anderen Antworten gibt es einen wichtigen Unterschied für IE8: Wenn Sie display:none verwenden und versuchen, die Breite oder Höhe des Elements abzurufen, gibt IE8 0 zurück (während andere Browser die tatsächlichen Größen zurückgeben). IE8 gibt nur für visibility:hidden die richtige Breite oder Höhe zurück.

7
szeryf

visibility:hidden bewahrt den Raum; display:none nicht.

6
Pearl
display: none; 

Es ist auf der Seite nicht verfügbar und belegt keinen Platz.

visibility: hidden; 

ein Element wird ausgeblendet, der Speicherplatz bleibt jedoch unverändert. Das Element wird ausgeblendet, wirkt sich jedoch weiterhin auf das Layout aus.

visibility: hidden bewahrt den Raum, während display: none den Raum nicht bewahrt.

Anzeige ohne Beispiel: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Beispiel für ausgeblendete Sichtbarkeit: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

6
Anu

Wenn die Sichtbarkeitseigenschaft auf "hidden" festgelegt ist, nimmt der Browser auch dann noch Platz für den Inhalt auf der Seite ein, wenn er nicht sichtbar ist.
Wenn wir jedoch ein Objekt auf "display:none" setzen, weist der Browser dem Inhalt auf der Seite keinen Platz zu.

Beispiel:

<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>

Details anzeigen

5
Shubelal Kumar

visibility:hidden behält das Element auf der Seite bei und belegt diesen Platz, wird dem Benutzer jedoch nicht angezeigt.

display:none ist auf der Seite nicht verfügbar und belegt keinen Platz.

4
Ramesh

Ein weiterer Unterschied ist, dass visibility:hidden in sehr, sehr alten Browsern funktioniert und display:none nicht:

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

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

3
Dave Burton

Der Unterschied geht über den Stil hinaus und spiegelt sich im Verhalten der Elemente bei der Manipulation mit JavaScript wider.

Effekte und Nebenwirkungen von display: none:

  • das Zielelement wird aus dem Dokumentenfluss entfernt (wirkt sich nicht auf das Layout anderer Elemente aus).
  • alle Nachkommen sind betroffen (werden auch nicht angezeigt und können nicht aus dieser Vererbung herausschnappen);
  • messungen können weder für das Zielelement noch für seine Nachkommen vorgenommen werden - sie werden überhaupt nicht gerendert, daher sind ihre clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), alle geben 0s zurück.

Wirkungen und Nebenwirkungen von visibility: hidden:

  • das Zielelement wird ausgeblendet, aber nicht aus dem Flow entfernt. Es wirkt sich auf das Layout aus und belegt den normalen Platz.
  • innerText (aber nicht innerHTML) des Zielelements und seiner Nachkommen geben eine leere Zeichenfolge zurück.
1
Adam Jagosz

display:none; zeigt weder das Element an noch reserviert es Platz für das Element auf der Seite, während visibility:hidden; das Element nicht auf der Seite anzeigt, sondern Platz auf der Seite reserviert. In beiden Fällen können wir auf das Element in DOM zugreifen. Um es besser zu verstehen, schauen Sie sich bitte den folgenden Code an: Anzeige: keine vs Sichtbarkeit: versteckt

1
Pritam Bohra