Gibt es ein Gegenteil zu zeigen: keines?

Das Gegenteil von visibility: hiddenist visibility: visible. Gibt es auch ein Gegenteil für display: none?

Viele Menschen sind verwirrt, wenn sie herausfinden, wie ein Element angezeigt werden soll, wenn es vorhanden ist display: none, da dies nicht so klar ist wie die Verwendung der visibilityEigenschaft.

Ich könnte nur visibility: hiddenanstelle von verwenden display: none, aber es gibt nicht den gleichen Effekt, also gehe ich nicht damit.

display: nonehat kein wörtliches Gegenteil wie visibility:hidden.

Die visibilityEigenschaft entscheidet, ob ein Element sichtbar ist oder nicht. Es hat also zwei Zustände ( visibleund hidden), die einander entgegengesetzt sind.

Die displayEigenschaft entscheidet jedoch, welchen Layoutregeln ein Element folgt. Es gibt verschiedene Arten von Regeln, wie Elemente selbst auslegen wird in CSS, so gibt es verschiedene Werte ( block, inline, inline-blockusw. - finden Sie in der Dokumentation für diese Werte hier ).

display:none Entfernt ein Element vollständig aus dem Seitenlayout, als wäre es nicht vorhanden.

Alle anderen Werte für displaybewirken, dass das Element Teil der Seite ist, sodass sie in gewissem Sinne alle entgegengesetzt sind display:none.

Aber es gibt keinen Wert, von dem das direkte Gegenteil ist display:none- genau wie es keine Frisur gibt, die das Gegenteil von "Glatze" ist.

Ein wahres Gegenteil dazu display: nonegibt es (noch) nicht.

Ist display: unsetaber sehr nah und funktioniert in den meisten Fällen.

Von MDN (Mozilla Developer Network):

Das nicht gesetzte CSS-Schlüsselwort ist die Kombination aus dem anfänglichen und dem geerbten Schlüsselwort. Wie diese beiden anderen CSS-weiten Schlüsselwörter kann es auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzform all. Dieses Schlüsselwort setzt die Eigenschaft auf ihren geerbten Wert zurück, wenn sie von ihrem übergeordneten Wert erbt, oder auf ihren Anfangswert, wenn nicht. Mit anderen Worten, es verhält sich im ersten Fall wie das geerbte Schlüsselwort und im zweiten Fall wie das ursprüngliche Schlüsselwort.

(Quelle: https://developer.mozilla.org/docs/Web/CSS/unset )

Beachten Sie auch, dass display: revertderzeit entwickelt wird. Siehe MDN für Details.

Wenn das Element der Wechsel displayin Javascript, in vielen Fällen eine geeignete Option ‚Undo‘ das Ergebnis element.style.display = "none"ist element.style.display = "". Dadurch wird die displayDeklaration aus dem styleAttribut entfernt und der tatsächliche Wert der displayEigenschaft auf den im Stylesheet für das Dokument festgelegten Wert zurückgesetzt (auf die Standardeinstellung des Browsers, wenn diese nicht an anderer Stelle neu definiert wurde). Der zuverlässigere Ansatz ist jedoch, eine Klasse in CSS zu haben

.invisible { display: none; }

und Hinzufügen / Entfernen dieses Klassennamens zu / von element.className.

Sie können verwenden

display: normal;

Es funktioniert wie gewohnt .... Es ist ein kleines Hacken in CSS;)

Ich benutze display:block; es funktioniert bei mir

Wie Paul erklärt, gibt es kein wörtliches Gegenteil von Anzeige: keine in HTML, da jedes Element eine andere Standardanzeige hat und Sie die Anzeige auch mit einer Klasse oder einem Inline-Stil usw. ändern können.

Wenn Sie jedoch so etwas wie jQuery verwenden, verhalten sich die Funktionen zum Ein- und Ausblenden so, als gäbe es ein Gegenteil von "Keine anzeigen". Wenn Sie ein Element ausblenden und dann wieder anzeigen, wird es genauso angezeigt wie vor dem Ausblenden. Dazu speichern sie den alten Wert der Anzeigeeigenschaft beim Ausblenden des Elements, sodass es beim erneuten Anzeigen genauso angezeigt wird wie vor dem Ausblenden. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Dies bedeutet, dass, wenn Sie ein div beispielsweise so einstellen, dass es Inline oder Inline-Block anzeigt und Sie es ausblenden und dann erneut anzeigen, es erneut als Inline- oder Inline-Block angezeigt wird, wie es zuvor war

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

Skript:

  $('a').click(function(){
        $('div').toggle();
    });

Beachten Sie, dass die Anzeigeeigenschaft des div auch dann konstant bleibt, wenn es ausgeblendet (Anzeige: keine) und erneut angezeigt wurde.

Im Fall eines druckerfreundlichen Stylesheets verwende ich Folgendes:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

Ich habe dies verwendet, als ich ein Formular mit Werten drucken musste und die Eingabefelder schwer zu drucken waren. Also habe ich die Werte in ein span.print_only-Tag eingefügt (div.print_only wurde an anderer Stelle verwendet) und dann die .no_print-Klasse auf die Eingabefelder angewendet. Auf dem Bildschirm sehen Sie also die Eingabefelder und beim Drucken nur die Werte. Wenn Sie Lust haben, können Sie JS verwenden, um die Werte in den Span-Tags zu aktualisieren, wenn die Felder aktualisiert wurden, aber das war in meinem Fall nicht erforderlich. Vielleicht nicht die eleganteste Lösung, aber es hat bei mir funktioniert!

Sie können display: block verwenden

Beispiel:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

Ich bin auf diese Herausforderung gestoßen, als ich eine App erstellt habe, in der eine Tabelle für bestimmte Benutzer ausgeblendet werden soll, für andere jedoch nicht.

Anfangs habe ich es als Anzeige eingerichtet: keine, aber dann Anzeige: Inline-Block für die Benutzer, die ich sehen wollte, aber ich hatte die Formatierungsprobleme, die Sie möglicherweise erwarten (Spalten konsolidieren oder im Allgemeinen chaotisch).

Ich habe es umgangen, indem ich zuerst die Tabelle angezeigt und dann "display: none" für die Benutzer ausgeführt habe, die ich nicht sehen wollte. Auf diese Weise wurde es normal formatiert, verschwand jedoch nach Bedarf.

Eine Art laterale Lösung, könnte aber jemandem helfen!

Das Gegenteil von 'none' ist 'flex' während der Arbeit mit React Native.

Sichtbarkeit: versteckt versteckt das Element, aber das Element ist das mit DOM. Und im Falle einer Anzeige: keine, wird das Element aus dem DOM entfernt.

Sie haben also die Möglichkeit, das Element entweder ein- oder auszublenden. Aber sobald Sie es löschen (ich meine Anzeige keine), hat es keinen eindeutigen Gegenwert. Anzeige haben mehrere Werte wie Anzeige: Block, Anzeige: Inline, Anzeige: Inline-Block und viele andere. Sie können es von W3C aus überprüfen.

Die beste Antwort für display: noneist

display:inline

oder

display:normal

Sie können dies verwenden display:block;und auch hinzufügenoverflow:hidden;

Das beste "Gegenteil" wäre, es auf den Standardwert zurückzusetzen, der ist:

display: inline