Wie erstellt man ein verstecktes Div, das keinen Zeilenumbruch oder horizontalen Abstand erzeugt?

354

Ich möchte ein verstecktes Kontrollkästchen haben, das keinen Platz auf dem Bildschirm einnimmt.

Wenn ich das habe:

<div id="divCheckbox" style="visibility: hidden">

Ich sehe das Kontrollkästchen nicht, aber es wird immer noch eine neue Zeile erstellt.

Wenn ich das habe:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

Es wird keine neue Linie mehr erstellt, aber es nimmt horizontalen Platz auf dem Bildschirm ein.

Gibt es eine Möglichkeit, ein verstecktes Div zu haben, das keinen Platz einnimmt (vertikal oder horizontal?

Leora
quelle
Gibt es eine Verwendung für eine solche Div?
Jonno_FTW
6
@Jonno: Es wird häufig in AJAX verwendet. Angenommen, Sie haben eine Liste von Elementen mit Offenlegungsdreiecken. Sie möchten, dass Details oder ein Teilbaum angezeigt werden, wenn der Benutzer auf das Offenlegungsdreieck klickt. Sie setzen also eine <div id = "theID" style = "display: none;">, in die die Details eingefügt werden sollen. Wenn der Benutzer dann auf das Dreieck klickt, bewegen Sie das Dreieck auf eine "halbe" Position (nach Südosten zeigend) und lösen eine AJAX-Anforderung aus, um das <div> auszufüllen. Wenn die AJAX-Anforderung abgeschlossen ist, drehen Sie das Dreieck nach Süden und entfernen die "Anzeige: keine;" aus dem Stil des <div>. Die Bibliothek script.aculo.us macht dies oft.
Mike DeSimone

Antworten:

715

Verwenden display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden verbirgt das Element, nimmt aber dennoch Platz im Layout ein.

  • display: none Entfernt das Element vollständig aus dem Dokument, es nimmt keinen Platz ein.

CMS
quelle
42
um die div wieder zu zeigen (nur für den Fall, dass jemand wie ich braucht) -<div id="divCheckbox" style="display: inline-block;">
anujin
14
@anujin: Warum inline-block? Der Standardwert displayfür ein div ist block!
MMM
Gibt es eine Möglichkeit, das Gegenteil zu tun? Um ein Div von display: nonein display: inline-blockoder ein Äquivalent zu ändern, ohne dass das jetzt angezeigte Div Platz beansprucht und meine anderen DOM-Elemente verschiebt?
Bpromas
1
Möglicherweise lohnt es sich, die Antwort so zu aktualisieren, dass sie das seit HTML5.1 verfügbare globale versteckte HTML-Attribut enthält. Dies entspricht im Grunde der Aussage, display: noneobwohl direkt aus HTML. Jede Verwendung der displayEigenschaft überschreibt jedoch das Verhalten des hiddenglobalen Attributs.
Marius Mucenicu
54

Seit der Veröffentlichung von HTML5 kann man jetzt einfach Folgendes tun:

<div hidden>This div is hidden</div>

Hinweis: Dies wird von einigen alten Browsern nicht unterstützt , insbesondere IE <11.

Versteckte Attributdokumentation ( MDN , W3C )

C_B
quelle
1
Dies ist semantisch korrekter als das Ausblenden mit CSS, es ist besser für die Barrierefreiheit und wird von allen gängigen Browsern unterstützt. Es sollte die akzeptierte Antwort im Jahr 2020 sein.
Robin Métral
29

Verwenden Sie style="display: none;". Außerdem benötigen Sie wahrscheinlich keinen DIV display: none. Es reicht wahrscheinlich aus , nur den Stil auf das Kontrollkästchen zu setzen.

Tvanfosson
quelle
Ich muss meine Warnmeldung beim Laden der Seite ausblenden und wollte sie beim Klicken auf die Schaltfläche erneut anzeigen. Versucht, visibility: hiddenaber das zeigte leeren Raum. style="display: none;"arbeitete wie ein kleiner Zauber :)
Sohaiby
8

Zusätzlich zur Antwort von CMS können Sie den Stil in ein externes Stylesheet einfügen und den Stil der ID wie folgt zuweisen:

#divCheckbox {
display: none;
}
Zeta Zwei
quelle
+1, das ist wirklich ein guter Vorschlag, aber wie kann man nur ein Kontrollkästchen anzeigen, ohne die Sichtbarkeit aller anderen Kontrollkästchen zu beeinträchtigen?
Owais Qureshi
1
@dotNetSoldier Alte Frage, aber hier sollte es eine Antwort geben. Sie haben eine CSS-Klasse namens invis und fügen sie mit JS zum Kontrollkästchen oder div by id hinzu.
DanielST
8

Da Sie sich auf Benutzerfreundlichkeit und Allgemeingültigkeit in CSS konzentrieren sollten, anstatt eine ID zu verwenden, um auf ein bestimmtes Layoutelement zu verweisen (was zu großen oder mehreren CSS-Dateien führt), sollten Sie wahrscheinlich stattdessen eine echte Klasse in Ihrer verknüpften CSS-Datei verwenden:

.hidden {
visibility: hidden;
display: none;
}

oder für den Minimalisten:

.hidden {
display: none;
}

Jetzt können Sie es einfach anwenden über:

<div class="hidden"> content </div>
Dave
quelle
Code sieht auf diese Weise viel sauberer aus! Ich bevorzuge eine Klasse gegenüber einem Inline-Stil
Harry Cho
5

Ziehen Sie <span>in Betracht , kleine Segmente von Markups zu isolieren, die gestaltet werden sollen, ohne das Layout zu unterbrechen. Dies scheint idiomatischer zu sein, als zu versuchen, a zu zwingen, sich <div>nicht selbst anzuzeigen - wenn das Kontrollkästchen selbst nicht so gestaltet werden kann, wie Sie es möchten.

Reicher Kirchenmann
quelle
4

Ein- / Ausblenden per Mausklick:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Quelle: Hier

Mahdi Jazini
quelle
4

Verwenden Sie, um zu verhindern, dass das Kontrollkästchen Speicherplatz belegt, ohne es aus dem DOM zu entfernen hidden.

<div hidden id="divCheckbox">

Das Kontrollkästchen aus der Aufnahme jeden Raumes zu verhindern , und auch sie aus dem DOM, Gebrauch zu entfernen display: none.

<div id="divCheckbox" style="display:none">
smac89
quelle
3

Um das Element visuell auszublenden , aber im HTML-Code zu belassen, können Sie Folgendes verwenden:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

oder

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

Womit kann etwas schief gehen display:none? Das Element wird vollständig aus dem HTML-Code entfernt, sodass einige Funktionen möglicherweise nicht mehr funktionieren, wenn sie auf etwas im versteckten Element zugreifen müssen.

THN
quelle
0

display: none;

Dadurch sollte das Element verschwinden und keinen Platz beanspruchen.

Jose Luis Rasmussen Garcia
quelle
Vielen Dank an die Leute, die die Formatierung meiner Antwort kommentiert haben.
Jose Luis Rasmussen Garcia