Ich verwende visibility:hidden, um bestimmte Elemente auszublenden, aber sie belegen immer noch Platz auf der Seite, während sie ausgeblendet sind.
Wie kann ich sie visuell vollständig verschwinden lassen, als wären sie überhaupt nicht im DOM (aber ohne sie tatsächlich aus dem DOM zu entfernen)?
Antworten:
Versuchen Sie, die Einstellung display:noneauszublenden und display:blockanzuzeigen.
display: block, einige müssen auf gesetzt werden display: inline(z. B. <span>oder <a>oder <img>DOM-Elemente).
hiddenmit aufgerufen wird display: none. Fügen Sie die Klasse einem Element hinzu, um sie auszublenden, und entfernen Sie sie. Beim Entfernen wird die displayEigenschaft auf den Standardstandard zurückgesetzt.
Die Verwendung display:noneist eine gute Option, um nur ein Element zu entfernen, ABER es wird auch für Bildschirmleser entfernt . Es gibt auch Diskussionen, ob es SEO beeinflusst. Es gibt einen guten, kurzen Artikel zu diesem Thema auf A List Apart
Wenn Sie wirklich nur ein Element ausblenden und nicht entfernen möchten , verwenden Sie besser:
div {
position: absolute;
left: -999em;
}So kann es auch von Screenreadern gelesen werden.
Der einzige Nachteil dieser Methode besteht darin, dass dieser DIV tatsächlich gerendert wird und die Leistung beeinträchtigen kann , insbesondere bei Mobiltelefonen.
visibility: hidden;, nehmen wir an, Sie haben andere absolute Elemente, die keinen Konflikt für den Raum haben, sondern nur einen Konflikt von z-index. Nur um ein Element zu verstecken, mit dem ich gehen würdevisibility
Schauen Sie, anstatt Verwendung zu visibility: hidden;verwenden display: none;. Die erste Option wird ausgeblendet, nimmt aber immer noch Platz ein, und die zweite Option wird ausgeblendet und nimmt keinen Platz ein.
Die Antwort auf diese Frage lautet "display: none" und "display: block". Dies ist jedoch nicht hilfreich für Personen, die versuchen, mithilfe von CSS-Übergängen Inhalte mithilfe der Sichtbarkeitseigenschaft anzuzeigen und auszublenden.
Das hat mich auch verrückt gemacht, weil die Verwendung von Display alle CSS-Übergänge beendet.
Eine Lösung besteht darin, dies der Klasse hinzuzufügen, die Sichtbarkeit verwendet:
overflow:hiddenDamit dies funktioniert, hängt es vom Layout ab, aber es sollte den leeren Inhalt innerhalb des Divs behalten, in dem es sich befindet.
Anzeige: Keine ist Lösung, das verbirgt Elemente vollständig mit seinem Raum.
display:noneundvisibility: hiddenvisibility:hidden bedeutet, dass das Tag nicht sichtbar ist, aber auf der Seite Platz dafür zugewiesen ist.
display:nonebedeutet, Elemente mit seinem Raum vollständig zu verbergen. (obwohl Sie immer noch über das DOM damit interagieren können)
display:nonezu verstecken und display:blockzu zeigen.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddennur die Anzeige von Inhalten, verwendet jedoch weiterhin vertikalen / horizontalen Raum. Anzeige: Keine entfernt den vertikalen / horizontalen Raum für das Element.
Hier ist eine andere Sichtweise, wie Sie sie nach der Anzeige zurücksetzen können: keine. Verwenden Sie nicht display: block / inline usw. Setzen Sie stattdessen (wenn Sie Javascript verwenden) die Anzeige der CSS-Eigenschaft auf '' (dh leer).
Nach meinem Wissen ist dies auf vier Arten möglich
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTopunddisplay:nonesetzte esoffsetTopauf 0. Meine Lösung bestand darinvisibility: hidden, die Breite und Höhe auf 0 zu setzen. Nachdem ich das Element wieder sichtbar machen musste, entfernte ich die drei Attribute mit Javascript. Eine etwas hackige Lösung, aber sie funktioniert für so ziemlich alle Anwendungsfälle.