Was ist der Unterschied zwischen Sichtbarkeit: versteckt und display: none?

Question

Die CSS-Regeln visibility:hidden und display:none sowohl Ergebnis in dem Element nicht sichtbar ist. Sind diese Synonyme?

Answer 1

display:none bedeutet, dass der betreffenden Tag auf der Seite nicht angezeigt wird (obwohl man immer noch mit ihr durch den dom in Wechselwirkung treten kann). Es gibt keinen Platz für sie zwischen den anderen Tags zugewiesen werden.

visibility:hidden bedeutet, dass im Gegensatz zu display:none, das Tag nicht sichtbar ist, aber der Platz ist für sie auf der Seite zugeordnet. Der Tag wird gemacht, es ist einfach nicht auf der Seite gesehen.

Zum Beispiel:

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

Ersetzen [style-tag-value] mit display:none ergibt:

test |   | test

Ersetzen [style-tag-value] mit visibility:hidden ergibt:

test |                        | test

Answer 2

Sie sind nicht synonym.

display:none entfernt das Element aus dem normalen Fluss der Seite, so dass andere Elemente zu füllen.

visibility:hidden verläßt das Element im normalen Fluss der Seite, so dass immer noch Raum einnimmt.

Stellen Sie sich in der Linie für eine Fahrt in einem Vergnügungspark und jemand in der Leitung sind bekommt so Rowdy, dass die Sicherheit sie von der Linie zupft. Jede in Linie bewegt sich dann eine Position weiter, die nun leeren Schlitz zu füllen. Das ist wie display:none.

Man vergleiche dies mit der ähnlichen Situation, aber dass jemand vor Ihnen setzt auf einem Tarnumhang. Während die Linie sehen, wird es aussehen wie ein leerer Raum ist, aber die Leute, die leer suchen Raum nicht wirklich ausfüllen kann, weil jemand immer noch da. Das ist wie visibility:hidden.

Answer 3

Eine Sache noch hinzugefügt, obwohl es nicht gefragt wurde, ist, dass es eine dritte Option ist das Objekt vollständig transparent zu machen. Bedenken Sie:

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.

Der Unterschied zwischen 1 und 2 wird bereits darauf hingewiesen worden (nämlich 2 noch Platz in Anspruch nimmt). Allerdings gibt es einen Unterschied zwischen 2 und 3: im Fall 3, wird die Maus immer noch auf die Hand wechseln, wenn sie über den Link schwebt, und der Benutzer kann immer noch auf dem Link klicken und Javascript Veranstaltungen werden noch auf dem Link feuern. Dies ist in der Regel nicht das gewünschte Verhalten. Das Verhalten beim Auswählen von Text zu zwischen den Browsern unterschiedlich sein kann.

Answer 4

display:none entfernt das Element aus dem Layout-Flow.

visibility:hidden versteckt es aber verlässt den Raum.

Answer 5

Es gibt einen großen Unterschied, wenn es um Kinderknoten kommt. Zum Beispiel: Wenn Sie einen Elternteil div und ein verschachteltes Kind div haben. Also, wenn Sie schreiben, wie folgt aus:

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

In diesem Fall keinen der divs sichtbar. Aber wenn Sie schreiben, wie folgt aus:

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

Dann wird das Kind div sichtbar sein, während die Eltern div nicht angezeigt wird.

Answer 6

Sie sind nicht Synonyme -. display: none entfernt das Element aus dem Fluss der Seite, und den Rest der Seite fließt, als ob sie nicht da waren

visibility: hidden blendet das Element aus dem Blickfeld, aber nicht der Seite fließt, Platz auf der Seite für sie zu verlassen.

Answer 7

display: none entfernt das Element aus der Seite vollständig, und die Seite wird gebaut, als ob das Element gar nicht da war.

Visibility: hidden verlässt den Raum im Belegfluss, obwohl sie nicht mehr sehen kann.

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

Answer 8

Mit visibility:hidden dem Objekt nimmt noch vertikale Höhe auf der Seite nach oben. Mit display:none wird vollständig entfernt. Wenn Sie Text unter einem Bild haben, und Sie tun display:none, dass Text verschiebt sich nach oben um den Raum zu füllen, wo das Bild war. Wenn Sie das tun Sichtbarkeit. Versteckt wird der Text in der gleichen Position bleiben

Answer 9

display:none wird das Element verstecken und Zusammenbruch der Raum wurde die Aufnahme, während visibility:hidden das Element ausblendet und die Elemente Raum zu bewahren. Anzeige:. keines auch einige der Eigenschaften, erhältlich von Javascript in älteren Versionen von IE und Safari bewirkt

Answer 10

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

Answer 11

display: none; 

Es wird nicht auf der Seite zur Verfügung und belegt keinen Platz.

visibility: hidden; 

es verbirgt sich ein Element, aber es wird immer noch den gleichen Raum wie vor in Anspruch nehmen. Das Element wird versteckt, aber immer noch, beeinflusst das Layout.

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

Display Kein Beispiel: https://www.w3schools.com/css /tryit.asp?filename=trycss_display_none

Sichtbarkeit verstecktes Beispiel: https://www.w3schools.com/cssref /tryit.asp?filename=trycss_visibility

Answer 12

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

Answer 13

Wenn Sichtbarkeit Eigenschaft auf "hidden", wird der Browser nimmt noch Platz auf der Seite für den Inhalt, obwohl es unsichtbar.
Aber wenn wir ein Objekt "display:none" setzen, wird der Browser nicht zuteilen Platz auf der Seite für dessen Inhalt.

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

Answer 14

visibility:hidden wird das Element in der Seite halten und diesen Raum einnimmt, zeigt aber nicht an den Benutzer.

display:none wird auf der Seite nicht zur Verfügung und belegt keinen Platz.

Answer 15

Ein weiterer Unterschied besteht darin, dass visibility:hidden in wirklich, wirklich 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

Answer 16

display:none; wird weder das Element angezeigt werden, noch wird es Platz für das Element auf der Seite zuteilen während visibility:hidden; nicht das Element auf der Seite angezeigt wird, sondern Platz auf der Seite zuzuteilen. Wir können in beiden Fällen das Element in DOM zugreifen. Um zu verstehen, es in einer besseren Art und Weise schauen Sie bitte auf den folgenden Code: display: none vs visibility: hidden

Answer 17

Der Unterschied geht über Stil und spiegelt sich in, wie die Elemente verhalten, wenn sie mit JavaScript manipuliert werden.

Effekte und Nebenwirkungen von display: none:

• das Zielelement aus dem Dokumentenfluss genommen (hat keinen Einfluss auf das Layout von anderen Elementen);
• alle Nachkommen betroffen sind (sind auch nicht angezeigt und können nicht „snap out“ dieses Erbe);
• Messungen können nicht für das Zielelement gemacht werden, noch für seine Nachkommen - sie überhaupt nicht wiedergegeben werden, so dass ihre clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), alle Rückgabe 0s
.

Wirkungen und Nebenwirkungen von visibility: hidden:

• wird das Zielelement aus dem Blick verborgen, ist aber nicht aus dem Fluss genommen und wirkt sich das Layout, den normalen Raum einnimmt;
• innerText (aber nicht innerHTML) des Zielelements und Nachkommen gibt leere Zeichenfolge zurück.