Het tegenovergestelde van visibility: hiddenis visibility: visible. Evenzo, is er een tegenovergestelde voor display: none?
Veel mensen raken in de war als ze bedenken hoe ze een element moeten tonen als het display: noneheeft, omdat het niet zo duidelijk is als het gebruik van de eigenschap visibility.
Ik zou gewoon visibility: hiddenkunnen gebruiken in plaats van display: none, maar het geeft niet hetzelfde effect, dus ik ga er niet mee akkoord.
Antwoord 1, autoriteit 100%
display: noneheeft geen letterlijke tegenpool zoals visibility:hiddenheeft.
De eigenschap visibilitybepaalt of een element zichtbaar is of niet. Het heeft daarom twee statussen (visibleen hidden), die tegengesteld zijn aan elkaar.
De eigenschap displaybepaalt echter welke lay-outregels een element zal volgen. Er zijn verschillende soorten regels voor hoe elementen zichzelf in CSS zullen opmaken, dus er zijn verschillende waarden (block, inline, inline-blocketc — zie de documentatie voor deze waarden hier).
display:noneverwijdert een element volledig uit de paginalay-out, alsof het er niet was.
Alle andere waarden voor displayzorgen ervoor dat het element deel uitmaakt van de pagina, dus in zekere zin zijn ze allemaaltegengesteld aan display:none.
Maar er is niet één waarde die het directe omgekeerde is van display:none– net zoals er geen enkele haarstijl is die het tegenovergestelde is van “kaal”.
Antwoord 2, autoriteit 48%
Het tegenovergestelde van display: noneis er (nog) niet.
Maar display: unsetis heel dichtbij en werkt in de meeste gevallen.
Van MDN(Mozilla Developer Network):
Het unset CSS-sleutelwoord is de combinatie van de initial- en inherit-sleutelwoorden. Net als deze twee andere CSS-brede trefwoorden, kan het worden toegepast op elke CSS-eigenschap, inclusief de CSS-steno allemaal. Met dit sleutelwoord wordt de eigenschap teruggezet naar de geërfde waarde als deze van de bovenliggende waarde erft, of naar de oorspronkelijke waarde als dat niet het geval is. Met andere woorden, het gedraagt zich als het inherit-sleutelwoord in het eerste geval en als het initiële sleutelwoord in het tweede geval.
(bron: https://developer.mozilla.org/docs/ Web/CSS/uitschakelen)
Houd er rekening mee dat display: revertmomenteel wordt ontwikkeld. Zie MDNvoor details.
Antwoord 3, autoriteit 18%
Bij het wijzigen van de displayvan het element in Javascript, is in veel gevallen een geschikte optie om het resultaat van element.style.display = "none"ongedaan te maken element.style.display = "". Dit verwijdert de displaydeclaratie van het styleattribuut, waarbij de werkelijke waarde van de displayeigenschap wordt teruggezet naar de waarde die is ingesteld in de stylesheet voor het document (om de browserstandaard indien niet elders opnieuw gedefinieerd). Maar de betrouwbaardere benadering is om een klasse in CSS te hebben zoals
.invisible { display: none; }
en het toevoegen/verwijderen van deze klassenaam aan/van element.className.
Antwoord 4, autoriteit 2%
u kunt
. gebruiken
display: normal;
Het werkt als normaal…. Het is een kleine hack in css 😉
Antwoord 5, autoriteit 2%
Ik gebruik
display:block;
Het werkt voor mij
Antwoord 6, autoriteit 2%
Zoals Paul uitlegt is er geen letterlijk tegenovergestelde van weergave: geen in HTML, aangezien elk element een andere standaardweergave heeft en je de weergave ook kunt wijzigen met een klasse- of inline-stijl enz.
Als u echter iets als jQuery gebruikt, gedragen hun functies voor tonen en verbergen zich alsof er een tegenovergestelde is van geen weergave. Wanneer u een element verbergt en vervolgens opnieuw toont, wordt het op precies dezelfde manier weergegeven als voordat het werd verborgen. Ze doen dit door de oude waarde van de eigenschap display op te slaan bij het verbergen van het element, zodat wanneer u het opnieuw laat zien, het op dezelfde manier wordt weergegeven als voordat u het verborg.
https://github.com/jquery/jquery/blob/740e1902531458127114deded73 /src/css.js#L180
Dit betekent dat als u een div instelt om bijvoorbeeld inline of inline-block weer te geven en u deze verbergt en vervolgens weer toont, deze weer wordt weergegeven als display inline of inline-block, net zoals voorheen
p>
<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>
script:
$('a').click(function(){
$('div').toggle();
});
Merk op dat de display-eigenschap van de div constant blijft, zelfs nadat deze was verborgen (display:none) en opnieuw werd weergegeven.
Antwoord 7
In het geval van een printervriendelijke stylesheet gebruik ik het volgende:
/* screen style */
.print_only { display: none; }
/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }
Ik gebruikte dit wanneer ik een formulier met waarden moest afdrukken en de invoervelden moeilijk af te drukken waren. Dus ik heb de waarden toegevoegd die zijn verpakt in een span.print_only tag (div.print_only werd elders gebruikt) en vervolgens de .no_print klasse toegepast op de invoervelden. Dus op het scherm ziet u de invoervelden en wanneer afgedrukt, alleen de waarden. Als je zin had, zou je JS kunnen gebruiken om de waarden in de span-tags bij te werken wanneer de velden werden bijgewerkt, maar dat was in mijn geval niet nodig. Misschien niet de meest elegante oplossing, maar het werkte voor mij!
Antwoord 8
Ik kwam deze uitdaging tegen bij het bouwen van een app waarbij ik een tabel wilde verbergen voor bepaalde gebruikers, maar niet voor anderen.
Aanvankelijk stelde ik het in als display:none maar daarna display:inline-block voor die gebruikers die ik het wilde zien, maar ik ondervond de opmaakproblemen die je zou verwachten (kolommen consolideren of over het algemeen rommelig).
De manier waarop ik er omheen werkte, was om eerst de tabel te tonen en dan “display:none” te doen voor die gebruikers die ik niet wilde zien. Op deze manier werd het normaal geformatteerd, maar verdween het toen als dat nodig was.
Een beetje een laterale oplossing, maar kan iemand helpen!
Antwoord 9
U kunt display: block gebruiken
Voorbeeld:
<!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>
Antwoord 10
het tegenovergestelde van ‘none’ is ‘flex’ tijdens het werken met react native.
Antwoord 11
visibility:hidden zal het element verbergen, maar het element is hun met DOM. En in het geval van display:none wordt het element uit de DOM verwijderd.
Dus je hebt de mogelijkheid om elementen te verbergen of zichtbaar te maken. Maar als je het eenmaal verwijdert (ik bedoel geen weergave) heeft het geen duidelijke tegengestelde waarde. display hebben verschillende waarden, zoals display:block,display:inline, display:inline-block en vele andere. je kunt het bekijken via W3C.
Antwoord 12
display:unset zet het terug naar een initiële instelling, niet naar de vorige “display”-waarden
ik heb zojuist de vorige weergavewaarde gekopieerd (in mijn geval display: flex;)
opnieuw (na weergave niet), en het heeft de weergave overtroffen: geen succesvol
(ik gebruikte display:none om elementen voor mobiele en kleine schermen te verbergen)
Antwoord 13
Het beste antwoord voor display: noneis
display:inline
of
display:normal
Antwoord 14
Het beste “tegenovergestelde” zou zijn om het terug te zetten naar de standaardwaarde, namelijk:
display: inline
Antwoord 15
Je kunt deze display:block;gebruiken en ook overflow:hidden;
toevoegen