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

1173

Die CSS-Regeln visibility:hiddenund display:nonebeide führen dazu, dass das Element nicht sichtbar ist. Sind das Synonyme?

Chris Noe
quelle

Antworten:

1475

display:nonebedeutet, 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:hiddenbedeutet, dass display:nonedas Tag im Gegensatz dazu nicht sichtbar ist, aber auf der Seite Platz dafür zugewiesen wird. Das Tag wird gerendert und auf der Seite nicht angezeigt.

Zum Beispiel:

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

Ersetzen [style-tag-value]durch display:noneErgebnisse in:

test |   | test

Ersetzen [style-tag-value]durch visibility:hiddenErgebnisse in:

test |                        | test
kemiller2002
quelle
14
Kein Kommentar zur Leistung des einen oder anderen? Ich bin gespannt, mit welcher Methode ich absolut positionierte Elemente ausblenden kann, die häufig angezeigt und ausgeblendet werden.
Tomáš Zato - Wiedereinsetzung Monica
2
Dies ist eine totale Vermutung, dass ich keine Tests durchgeführt habe, aber ich würde vermuten, dass sie ungefähr gleich sind. Sobald sich etwas auf dem Bildschirm ändert, wird der gesamte Bildschirm neu gerendert (zumindest früher), und es spielt also keine Rolle. Sie erzwingen immer noch ein Neulackieren des Bildschirms. Dies könnte jedoch sehr Browser für Browser sein, und in Wahrheit gibt es wahrscheinlich bessere Möglichkeiten, den Code zu optimieren, als sich auf diese zu konzentrieren.
kemiller2002
13
@ Kevin ist darin korrekt visibility: hiddenund display: nonewird gleichermaßen performant sein, da beide Rigg-Layout, Farbe und Composite. Allerdings opacity: 0ist funktional äquivalent zu visibility: hiddenund nicht triggert den Layoutschritt, so rät ich würde mit , dass , wenn Sie nicht den leeren Raum dagegen noch zugeordnet ist (sonst verwenden display: none).
Jayrobin
76
Es ist wichtig, CSS-Übergänge zu berücksichtigen, wenn es um Sichtbarkeit und Anzeige geht. Beispiel: Umschalten von der Sichtbarkeit: versteckt; zur Sichtbarkeit: sichtbar; ermöglicht die Verwendung von CSS-Übergängen, während das Umschalten von der Anzeige: keine; anzuzeigen: blockieren; nicht. Sichtbarkeit: versteckt hat den zusätzlichen Vorteil, dass keine Javascript-Ereignisse erfasst werden, während Deckkraft: 0; erfasst Ereignisse.
Michael Deal
9
opacity: 0sollte beim Umgang mit Eingaben oder Schaltflächen mit Vorsicht verwendet werden, da diese noch vorhanden sind und möglicherweise seltsame Benutzerinteraktionen verursachen.
Jacques Mouette
233

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 Fluss der Seite, sodass noch Platz belegt wird.

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 Sicherheit ihn aus der Schlange holt. Jeder in der Reihe bewegt sich dann um eine Position vorwärts, 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 Unsichtbarkeitsumhang anzieht. Beim Betrachten der Linie sieht es so aus, als ob es einen leeren Raum gibt, aber die Leute können diesen leer aussehenden Raum nicht wirklich füllen, weil noch jemand da ist. Das ist wie visibility:hidden.

user22151
quelle
3
Es gibt einen weiteren großen Unterschied zwischen ihnen: Zumindest in Chrome kann die Sichtbarkeit mit Übergangsverzögerung verwendet werden, die Anzeige ignoriert sie jedoch.
SapphireSun
1
Lustige Art zu erklären, aber interessant. :)
Elango Paul Victor
107

Eine Sache, die hinzugefügt werden sollte, obwohl sie nicht gefragt wurde, 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.

(Klicken Sie oben auf die Schaltfläche "Code-Snippet ausführen", um das Ergebnis anzuzeigen.)

Auf den Unterschied zwischen 1 und 2 wurde bereits hingewiesen (2 nimmt immer noch Platz ein). Es gibt jedoch einen Unterschied zwischen 2 und 3: In Fall 3 wechselt die Maus immer noch zur Hand, wenn Sie mit der Maus über den Link fahren, und der Benutzer kann weiterhin auf den Link klicken, und Javascript-Ereignisse werden weiterhin auf den Link ausgelöst. Dies ist normalerweise nicht das gewünschte Verhalten (aber vielleicht manchmal?).

Ein weiterer Unterschied besteht darin, dass Sie Folgendes auswählen, wenn Sie den Text auswählen und dann als einfachen Text kopieren / einfügen:

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

In Fall 3 wird der Text kopiert. Vielleicht wäre dies für eine Art Wasserzeichen nützlich, oder wenn Sie einen Copyright-Hinweis ausblenden möchten, der angezeigt wird, wenn ein unachtsamer Benutzer Ihren Inhalt kopiert / einfügt?

Pennen
quelle
@greenoldman Können Sie ein Beispiel geben? Hier ist eine jsfiddle, bei der ein verstecktes Element (ich habe div and span ausprobiert) das einzige Element in seinem Container ist und immer noch Platz beansprucht
Kip
@Kip, komisch - ich kann das jetzt nicht (und ich habe auch mein eigenes Projekt geändert). OK, ich entferne besser meinen vorherigen Kommentar und wenn ich einen soliden Testfall habe, werde ich ihn zeigen, entschuldige das Rauschen.
Greenoldman
89

display:none Entfernt das Element aus dem Layoutfluss.

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

mmaibaum
quelle
70

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

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

In diesem Fall ist keine der Divs sichtbar. Aber wenn Sie so schreiben:

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

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

Govinda
quelle
Guter Punkt, dies kann leicht übersehen werden. Anzeige: keine / Block löst keine Übergänge aus, daher kann die Verwendung von Sichtbarkeit: versteckt funktionieren, aber die untergeordneten Elemente benötigen auch Verleumdung: gleichzeitig versteckt
Drenai
18

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

visibility: hidden Blendet das Element vor der Ansicht aus, nicht jedoch den Seitenfluss, sodass auf der Seite Platz dafür bleibt.

ConroyP
quelle
15

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 Dokumentfluss, obwohl Sie ihn nicht mehr sehen können.

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

wcm
quelle
Mit $ ('# element'). Remove () wird das Element vollständig von der Seite (DOM) entfernt. Wenn Sie es nicht anzeigen oder keinen Speicherplatz verwenden, müssen Sie es nicht entfernen. Sie können den Status weiterhin mit einem einfachen $ ('# Element'). Show () ändern, damit er nicht "vollständig entfernt" wird.
Foxontherock
11

Mit visibility:hiddendem Objekt nimmt noch vertikale Höhe auf der Seite ein. Damit ist display:nonees komplett entfernt. Wenn Sie Text unter einem Bild haben und dies tun display:none, wird dieser Text nach oben verschoben, um den Bereich zu füllen, in dem sich das Bild befand. Wenn Sie Sichtbarkeit tun: Ausgeblendet bleibt der Text an derselben Stelle.

Steven Williams
quelle
Mit versteckt ist der erhaltene Raum nur die vertikale Dimension. Was ist mit horizontal?
Chris Noe
2
Die horizontale Dimension bleibt ebenfalls erhalten.
JB Hurteaux
9

display:noneversteckt das Element und reduziert den Platz, den es einnimmt, während visibility:hiddendas Element ausgeblendet wird und der Raum des Elements erhalten bleibt. Anzeige: Keine wirkt sich auch auf einige der Eigenschaften aus, die in älteren Versionen von IE und Safari in Javascript verfügbar sind.

Slashnick
quelle
7

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

szeryf
quelle
7

visibility:hiddenbewahrt den Raum; display:nonenicht.

Perle
quelle
6
display: none; 

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

visibility: hidden; 

Es verbirgt ein Element, nimmt aber immer noch den gleichen Platz ein wie zuvor. Das Element wird ausgeblendet, wirkt sich jedoch auf das Layout aus.

visibility: hiddenBewahren Sie den Raum, während display: noneder Raum nicht erhalten bleibt.

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

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

Anu
quelle
Ich würde davon abraten, wegen der bekannten Ungenauigkeiten auf der Website auf w3schools zu verlinken.
Skere
5

Wenn die Sichtbarkeitseigenschaft festgelegt ist, "hidden"nimmt der Browser auf der Seite weiterhin Platz für den Inhalt ein, obwohl dieser unsichtbar ist.
Wenn wir jedoch ein Objekt auf festlegen, "display:none"weist der Browser der Seite keinen Speicherplatz für dessen Inhalt 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

Shubelal Kumar
quelle
4

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

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

Ramesh
quelle
2

Der Unterschied geht über den Stil hinaus und spiegelt sich darin wider, wie sich die Elemente verhalten, wenn sie mit JavaScript bearbeitet werden.

Wirkungen und Nebenwirkungen von display: none:

  • Das Zielelement wird aus dem Dokumentfluss entfernt (hat keinen Einfluss auf das Layout anderer Elemente).
  • Alle Nachkommen sind betroffen (werden auch nicht angezeigt und können aus dieser Vererbung nicht „herausschnappen“).
  • noch für seine Nachkomme Messungen nicht für das Zielelement gemacht werden - sie sind überhaupt nicht wiedergegeben, so dass sie clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), alle Rückkehr 0s.

Wirkungen und Nebenwirkungen von visibility: hidden:

  • Das Zielelement ist nicht sichtbar, wird jedoch nicht aus dem Fluss entfernt und wirkt sich auf das Layout aus, da es seinen normalen Platz einnimmt.
  • innerText(aber nicht innerHTML) des Zielelements und der Nachkommen gibt eine leere Zeichenfolge zurück.
Adam Jagosz
quelle
1

display:none;Das Element wird weder angezeigt, noch wird Platz für das Element auf der Seite zugewiesen, während das Element auf der Seite visibility:hidden;nicht angezeigt wird, sondern Platz auf der Seite zugewiesen wird. 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

Pritam Bohra
quelle
0

Hier gibt es viele detaillierte Antworten, aber ich dachte, ich sollte diese hinzufügen, um die Barrierefreiheit zu verbessern, da dies Auswirkungen hat.

display: none;und wird visibility: hidden;möglicherweise nicht von allen Bildschirmleseprogrammen gelesen. Denken Sie daran, was Benutzer mit Sehbehinderung erleben werden.

Die Frage fragt auch nach Synonymen. text-indent: -9999px;ist eine andere, die in etwa gleichwertig ist. Der wichtige Unterschied text-indentbesteht darin, dass es häufig von Bildschirmlesern gelesen wird. Es kann eine schlechte Erfahrung sein, da Benutzer weiterhin auf den Link zugreifen können.

Für die Barrierefreiheit wird heute eine Kombination von Stilen verwendet, um ein Element auszublenden und gleichzeitig für Bildschirmleser sichtbar zu sein.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Eine gute Vorgehensweise besteht darin, einen Link "Zum Inhalt springen" zum Anker des Hauptinhalts zu erstellen. Sehbehinderte Benutzer möchten wahrscheinlich nicht auf jeder einzelnen Seite Ihren vollständigen Navigationsbaum anhören. Machen Sie den Link visuell ausgeblendet. Benutzer können einfach auf die Tabulatortaste klicken, um auf den Link zuzugreifen.

Weitere Informationen zu Barrierefreiheit und versteckten Inhalten finden Sie unter:

Hackmesser
quelle