webentwicklung-frage-antwort-db.com.de

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

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

Wenn ich das habe:

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

Das Kontrollkästchen wird nicht angezeigt, es wird jedoch eine neue Zeile erstellt.

Wenn ich das habe:

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

es wird keine neue Linie mehr erstellt, sondern es wird horizontaler Platz auf dem Bildschirm beansprucht.

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

325
leora

Benutze display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden verbirgt das Element, belegt jedoch immer noch Platz im Layout.

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

673
CMS

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

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

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

Versteckte Attributdokumentation ( MDN , W3C )

46
C_B

Verwenden Sie style="display: none;". Wahrscheinlich brauchen Sie den DIV auch nicht, es würde wahrscheinlich ausreichen, den Stil auf display: none im Kontrollkästchen zu setzen.

29
tvanfosson

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

#divCheckbox {
display: none;
}
8
Zeta Two

Da Sie sich in CSS auf Benutzerfreundlichkeit und Allgemeines 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 in Ihrer verknüpften CSS-Datei wahrscheinlich stattdessen eine echte Klasse 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>
7
Dave

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

5
Rich Churcher

Einblenden/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

4
Mahdi Jazini

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

<div hidden id="divCheckbox">

Verwenden Sie display: none, um zu verhindern, dass das Kontrollkästchen Speicherplatz belegt und auch aus dem DOM entfernt.

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

Um das Element visuell auszublenden, es jedoch 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>

Was kann mit display:none schief gehen? Es entfernt das Element vollständig aus dem HTML-Code, sodass einige Funktionen möglicherweise nicht mehr funktionieren, wenn auf etwas im ausgeblendeten Element zugegriffen werden muss.

2
THN