Wie kann man ein Div unsichtbar machen, ohne es zu kommentieren?

Lesezeit: 5 Minuten

Benutzer-Avatar
Mubeen

Ist es möglich, ein div unsichtbar zu machen, ohne es auszukommentieren? Wenn das so ist, wie?

  • Warum möchten Sie ein Div, das Sie nicht anzeigen möchten? Diese Info könnte für die Beantwortung hilfreich sein.

    – Tasawer Khan

    12. Juni 2010 um 8:58 Uhr


  • @Taz: Das ist ein guter Punkt, aber ich habe einfach mit dem weitergemacht, was alternativ ist. Nur OP weiß, ob er sie wirklich vollständig entfernen oder für einen späteren Abruf verstecken muss.

    – Sarfraz

    12. Juni 2010 um 9:02 Uhr

Benutzer-Avatar
Sarfraz

Das musst du mit CSS verstecken:

div {                    /* this will hide all divs on the page */
  display:none;
}

Wenn es sich um ein bestimmtes Div mit einer bestimmten Klasse oder ID handelt, können Sie es wie folgt ausblenden:

<div class="div_class_name">Some Content</div>

CSS:

div.div_class_name {     /* this will hide div with class div_class_name */
  display:none;
}

Oder

<div id="div_id_name">Some Content</div>

CSS:

div#div_id_name {        /* this will hide div with id div_id_name */
  display:none;
}

Notiz: Sie müssen CSS-Typen dazwischen umschließen <style type="text/css"></style> Tags, Beispiel:

<style type="text/css">
  div#div_id_name {
    display:none;
  }
</style>

Mehr Informationen 🙂

  • Ich habe Ihren Beitrag zweimal bearbeitet, um Ihren Fehler zu beheben div.div_id_name Tippfehler, und jedes Mal, wenn Sie es überarbeitet haben: P … Ich gebe auf: P

    – Matt

    12. Juni 2010 um 8:37 Uhr

  • @Matt: Ja richtig, habe das beim Kopieren und Einfügen aus dem Klassenbeispiel nicht bemerkt. Aktualisiert. Vielen Dank 🙂

    – Sarfraz

    12. Juni 2010 um 8:42 Uhr

Sie können dies per Inline-Stil tun

<div style="display:none"></div>

oder indem Sie einen CSS-Stil wie in css add definieren

.HideableDiv{display:none;}

und in dein HTML schreiben

<div class="HideableDiv" ></div>

Es ist einfach. Das einzige, was Sie brauchen, ist, einen Stil hinzuzufügen, wie das folgende Beispiel zeigt:

CSS:

<style type="text/css">
    div.myInvisibleDiv {
        overflow: hidden;
        visibility: hidden;
        height: 0;
        width: 0;
    }
</style>

HTML:

<div class="myInvisibleDiv"><p>My invisible content</p></div>

Dieses div und sein Inhalt werden definitiv nicht angezeigt und stören keine umgebenden Elemente.

wenn Sie möchten, dass es im Wesentlichen aus Ihrem Layout verschwunden ist:

.element_class {
 display:none;
}

wenn Sie es nur unsichtbar machen wollen (aber trotzdem den Raum scheinbar leer halten)

.element_class {
 visibility: hidden;
}

und dann würde Ihr Element (wenn ein div) so aussehen:

<div class="element_class"></div>

im Grunde ist alles, dem Sie die class=”element_class” hinzufügen, entweder unsichtbar oder vollständig verborgen.

position: absolute;
left: -99999px; /* big number */

macht den Inhalt für die meisten Screenreader zugänglich, rendert das Element jedoch außerhalb des Bildschirms.

  • müsste der Browser es nicht immer noch rendern? Die Verwendung von “display:none” ist eine viel bessere und weniger verwirrende Methode

    – Stefan

    14. Juni 2010 um 8:17 Uhr

  • Warum die Ablehnung? Nur weil Sie denken, dass es verwirrend ist, heißt das nicht, dass mein Vorschlag schlecht oder nicht hilfreich ist. Eigentlich ist es eine altbekannte Standardmethode, wenn es um Barrierefreiheit geht. Es hängt davon ab warum Sie möchten die Informationen ausblenden, was die Informationen sind und wie hoch Sie die Messlatte legen, mein Vorschlag wäre eigentlich lieber display:none.

    – Adam Asham

    14. Juni 2010 um 17:19 Uhr


  • Es tut mir leid, ich glaube, ich habe den Zweck der Ablehnung missverstanden. vergib mir?

    – Stefan

    15. Juni 2010 um 6:03 Uhr

  • Nur eine Verwirrung. Wenn wir nicht möchten, dass es angezeigt wird. Sollte es für Screenreader zur Barrierefreiheit oder so etwas verfügbar sein.

    – Tasawer Khan

    16. Juni 2010 um 7:01 Uhr

  • Ein Skip-Navigation-Link ist vielleicht nicht so nützlich für Menschen mit gutem Sehvermögen, aber für einen Screenreader-Benutzer erleichtert es die Navigation auf einer Seite.

    – Adam Asham

    17. Juni 2010 um 17:19 Uhr

Benutzer-Avatar
Arsman Ahmad

Vielleicht ist es nicht die erforderliche Lösung, aber Sie können diese Art von Problemen mit diesen kleinen Tricks angehen.

Sie können verwenden jQuery um die Lösung zu erreichen. Wenn Sie die vollständig verstecken/anzeigen möchten divdann können Sie verwenden:

$('#my_element').show()
$('#my_element').hide()

Oder wenn Sie möchten, dass Ihr div unsichtbar wird und immer noch auf der Seite vorhanden ist, können Sie einen effizienten Trick anwenden:

$('#my_element').css('opacity', '0.0');    // invisible Maximum
$('#my_element').css('opacity', '1.0');   // visible maximum

  • müsste der Browser es nicht immer noch rendern? Die Verwendung von “display:none” ist eine viel bessere und weniger verwirrende Methode

    – Stefan

    14. Juni 2010 um 8:17 Uhr

  • Warum die Ablehnung? Nur weil Sie denken, dass es verwirrend ist, heißt das nicht, dass mein Vorschlag schlecht oder nicht hilfreich ist. Eigentlich ist es eine altbekannte Standardmethode, wenn es um Barrierefreiheit geht. Es hängt davon ab warum Sie möchten die Informationen ausblenden, was die Informationen sind und wie hoch Sie die Messlatte legen, mein Vorschlag wäre eigentlich lieber display:none.

    – Adam Asham

    14. Juni 2010 um 17:19 Uhr


  • Es tut mir leid, ich glaube, ich habe den Zweck der Ablehnung missverstanden. vergib mir?

    – Stefan

    15. Juni 2010 um 6:03 Uhr

  • Nur eine Verwirrung. Wenn wir nicht möchten, dass es angezeigt wird. Sollte es für Screenreader zur Barrierefreiheit oder so etwas verfügbar sein.

    – Tasawer Khan

    16. Juni 2010 um 7:01 Uhr

  • Ein Skip-Navigation-Link ist vielleicht nicht so nützlich für Menschen mit gutem Sehvermögen, aber für einen Screenreader-Benutzer erleichtert es die Navigation auf einer Seite.

    – Adam Asham

    17. Juni 2010 um 17:19 Uhr

1095230cookie-checkWie kann man ein Div unsichtbar machen, ohne es zu kommentieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy