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

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?

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.

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 )

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.

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;
}

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>

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.

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

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">

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.

display: none;

Dadurch sollte das Element verschwinden und keinen Platz beanspruchen.