CSS-Eigenschaften: Anzeige vs. Sichtbarkeit

Antworten:

111

Die visibilityEigenschaft teilt dem Browser nur mit, ob ein Element angezeigt werden soll oder nicht. Es ist entweder sichtbar ( visible- Sie können es sehen) oder unsichtbar ( hidden- Sie können es nicht sehen).

Die displayEigenschaft teilt dem Browser mit, wie ein Element gezeichnet und angezeigt werden soll, wenn überhaupt - ob es als inlineElement (dh es fließt mit Text und anderen Inline-Elementen) oder als blockElement auf Ebene (dh es hat Höhen- und Breiteneigenschaften ) angezeigt werden soll Sie können einstellen, es ist schwimmfähig, usw.) oder ein inline-block(dh , es wie ein Block - Box fungiert , sondern inline statt gelegt) und einige andere ( list-item, table, table-row, table-cell, flex, etc.).

Wenn Sie ein Element auf setzen , display: blockaber auch festlegen visibility: hidden, behandelt der Browser es weiterhin als Blockelement, außer Sie sehen es einfach nicht. So ähnlich wie Sie eine rote Box auf eine unsichtbare Box stapeln: Die rote Box sieht aus, als würde sie in der Luft schweben, wenn sie in Wirklichkeit auf einer physischen Box sitzt, die Sie nicht sehen können.

Mit anderen Worten bedeutet dies, dass Elemente, bei displaydenen dies nicht der Fall ist, noneden Fluss von Elementen auf einer Seite weiterhin beeinflussen, unabhängig davon, ob sie sichtbar sind oder nicht. Felder, die ein Element mit umgeben display: none, verhalten sich so, als wäre dieses Element nie vorhanden (obwohl es im DOM verbleibt).

BoltClock
quelle
1
.. hat das Display nichts mit dem DOM zu tun? Zum Beispiel ... wenn ja display: none;, wird dieses Element aus dem DOM entfernt? oder bin ich total verwirrt
Hristo
3
@Hristo: Eigentlich nicht. Sie können die Position oder Präsenz eines Elements im DOM niemals allein mit CSS beeinflussen.
BoltClock
@ BoltClock ... ja, du hast recht. Ich habe festgestellt, dass Sie niemals ein Element aus dem DOM herausnehmen können, sondern nur beeinflussen, wie es in Bezug auf das DOM angezeigt wird. klingt das genauer?
Hristo
Beachten Sie, dass Sie mit der Methode hide () von jQuery, mit der die Anzeige intern auf none gesetzt wurde, die Position dieses Elements nicht ermitteln können. Während Sie die Sichtbarkeit verwenden, können Sie dies tun.
p0rsche
21

Sichtbarkeit: versteckt;

  • Das Element wird nicht gezeichnet UND es werden keine Klick- / Berührungsereignisse empfangen, aber der dafür benötigte Platz ist immer noch belegt
  • Da es für Layoutzwecke immer noch vorhanden ist, können Sie es messen, ohne dass es sichtbar ist
  • Das Ändern des Inhalts kostet immer noch Zeit für das Reflow / Layout der Seite
  • Sichtbarkeit wird vererbt. Dies bedeutet, dass Sie Unterkinder sichtbar machen können, indem Sie ihnen Sichtbarkeit geben: sichtbar;

Anzeige: keine;

  • bewirkt, dass das Element nicht am Ablauf / Layout teilnimmt
  • kann (abhängig vom verwendeten Browser) Flash-Filme und Iframes beenden (die beim erneuten Anzeigen neu gestartet / geladen werden), obwohl Sie dies bei Iframes verhindern können
  • Das Element nimmt keinen Platz ein. Für Layoutzwecke ist es so, als ob es nicht existiert
  • Einige Browser / Geräte (wie das iPad) nehmen den von diesem Element verwendeten Speicher direkt zurück und verursachen kleine Probleme, wenn Sie während der Animationen zwischen keinem und einem anderen Wert wechseln

zusätzliche Hinweise:

  • Bilder in versteckten Inhalten: In allen gängigen Browsern werden Bilder weiterhin geladen, obwohl sie sich in einem Element mit Sichtbarkeit befinden: versteckt; oder Anzeige: keine;
  • Schriftarten in versteckten Inhalten: Webkit-Browser (Chrome / Safari) können das Laden von benutzerdefinierten Schriftarten verzögern, die nur in versteckten Elementen verwendet werden, auch durch Sichtbarkeit oder Anzeige. Dies kann dazu führen, dass Sie Elemente messen, die noch eine Fallback-Schriftart verwenden, bis die benutzerdefinierte Schriftart geladen wird.
Zauberer
quelle
19

Anzeige: Keine entfernt das Element aus dem HTML-Fluss, Sichtbarkeit: Verborgen nicht.

matpol
quelle
2

Anzeige: keine; entfernt den visuellen Stil / physischen Raum der DOM-Elemente aus dem DOM, während die Sichtbarkeit: ausgeblendet ist; entfernt das Element nicht, sondern versteckt es einfach. Ein Div, das 300 Pixel vertikalen Platz in Ihrem DOM einnimmt, belegt NOCH 300 Pixel vertikale Breite, wenn es auf Sichtbarkeit eingestellt ist: versteckt; aber wenn eingestellt, um anzuzeigen: keine; seine visuellen Stile und der Raum, den es einnimmt, sind verborgen und der Raum wird dann "frei", weil kein besseres Wort vorhanden ist.

[BEARBEITEN] - Es ist eine Weile her, dass ich das Obige geschrieben habe, und ob ich nicht gut genug informiert war oder einen schlechten Tag hatte, weiß ich nicht, aber die Realität ist, dass das Element NIE aus der DOM-Hierarchie entfernt wird. Alle Anzeigestile auf Blockebene sind bei Verwendung von Anzeige vollständig "ausgeblendet": keine, während bei Sichtbarkeit: ausgeblendet; Das Element selbst ist ausgeblendet, nimmt jedoch einen visuellen Raum im DOM ein. Ich hoffe das klärt die Dinge auf

SimonDowdles
quelle
4
Nein, ein Element display: nonewird nicht aus dem DOM entfernt. Das Element ist noch vorhanden, es wird nur nicht angezeigt .
BoltClock