De CSS-regels visibility:hidden
en display:none
resulteren er beide in dat het element niet zichtbaar is. Zijn dit synoniemen?
Antwoord 1, autoriteit 100%
display:none
betekent dat de tag in kwestie helemaal niet op de pagina zal verschijnen (hoewel je er nog steeds mee kunt communiceren via de dom). Er wordt geen ruimte voor toegewezen tussen de andere tags.
visibility:hidden
betekent dat, in tegenstelling tot display:none
, de tag niet zichtbaar is, maar dat er wel ruimte voor is op de pagina. De tag wordt weergegeven, maar wordt niet weergegeven op de pagina.
Bijvoorbeeld:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Het vervangen van [style-tag-value]
door display:none
resulteert in:
test | | test
Het vervangen van [style-tag-value]
door visibility:hidden
resulteert in:
test | | test
Antwoord 2, autoriteit 16%
Het zijn geen synoniemen.
display:none
verwijdert het element uit de normale stroom van de pagina, waardoor andere elementen kunnen invullen.
visibility:hidden
laat het element in het normale verloop van de pagina zodat het nog steeds ruimte inneemt.
Stel je voor dat je in de rij bent voor een ritje in een pretpark en iemand in de lijn wordt zo robuusd dat veiligheid ze van de lijn plukt. Iedereen in de rij gaat dan één positie verder om het nu lege slot te vullen. Dit is als display:none
.
Contrast dit met de vergelijkbare situatie, maar dat iemand voor je een onzichtbaarheidsmantel zet. Tijdens het bekijken van de lijn, zal het eruit zien dat er een lege ruimte is, maar mensen kunnen die lege ruimte niet echt opvullen omdat iemand er nog steeds is. Dit is als visibility:hidden
.
Antwoord 3, Autoriteit 8%
Eén ding dat de moeite waard is om toe te voegen, hoewel het niet werd gevraagd, is dat er een derde optie is om het object volledig transparant te maken. Overweeg:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.
Antwoord 4, Autoriteit 6%
display:none
Verwijdert het element van de lay-outstroom.
visibility:hidden
verbergt het maar laat de ruimte achter.
Antwoord 5, Autoriteit 5%
Er is een groot verschil als het gaat om kinderknooppunten. Bijvoorbeeld: als u een ouder div en een genested kind div. Dus als je zo schrijft:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
In dit geval is geen van de DIV’s zichtbaar. Maar als je zo schrijft:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
Dan is het kind DIV zichtbaar, terwijl de ouder DIV niet wordt getoond.
Antwoord 6
ze zijn geen synoniemen – display:none
Verwijdert het element uit de stroom van de pagina en de rest van de pagina Flows alsof het er niet was.
visibility:hidden
verbergt het element van weergave, maar niet de paginale stroom, waardoor er ruimte voor is op de pagina.
Antwoord 7
display:none
Verwijdert het element van de pagina volledig, en de pagina is gebouwd alsof het element er helemaal niet was.
visibility:hidden
Laat de ruimte in de Document Flow, ook al kunt u het niet langer zien.
Dit kan al dan niet een groot verschil maken, afhankelijk van wat u aan het doen bent.
Antwoord 8
Met visibility:hidden
Het object neemt nog steeds verticale hoogte op de pagina. Met display:none
Het is volledig verwijderd. Als u tekst onder een afbeelding hebt en u doet display:none
, die tekst verschuift omhoog om de ruimte te vullen waar de afbeelding was. Als u zichtbaarheid doet: verborgen blijft de tekst op dezelfde locatie.
Antwoord 9
display:none
Verbergt het element en de ineenstorting van de ruimte is het opnemen, terwijl visibility:hidden
zal het element verbergen en de elementenruimte behouden. DISPLAY: NONE EFFECTEN OOK Sommige van de eigenschappen die beschikbaar zijn bij JavaScript in oudere versies van IE en Safari.
Antwoord 10
visibility:hidden
Behoudt de ruimte; display:none
NIET.
Antwoord 11
Naast alle andere antwoorden is er een belangrijk verschil voor IE8: als u display:none
gebruikt en probeert de breedte of hoogte van het element te krijgen, retourneert IE8 0 (terwijl andere browsers de werkelijke maten). IE8 retourneert alleen de juiste breedte of hoogte voor visibility:hidden
.
Antwoord 12
display: none;
Het is niet beschikbaar op de pagina en neemt geen ruimte in beslag.
visibility: hidden;
het verbergt een element, maar het neemt nog steeds dezelfde ruimte in beslag als voorheen. Het element wordt verborgen, maar heeft nog steeds invloed op de lay-out.
visibility: hidden
behoudt de ruimte, terwijl display: none
de ruimte niet bewaart.
Weergave Geen Voorbeeld:https://www.w3schools.com/css /tryit.asp?filename=trycss_display_none
Zichtbaarheid verborgen voorbeeld: https://www.w3schools.com/cssref /tryit.asp?filename=trycss_visibility
Antwoord 13
Als de zichtbaarheidseigenschap is ingesteld op "hidden"
, neemt de browser nog steeds ruimte op de pagina in voor de inhoud, ook al is deze onzichtbaar.
Maar wanneer we een object instellen op "display:none"
, wijst de browser geen ruimte op de pagina toe voor de inhoud ervan.
Voorbeeld:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
Antwoord 14
visibility:hidden
houdt het element op de pagina en bezet deze ruimte, maar toont niet aan de gebruiker.
display:none
is niet beschikbaar op de pagina en neemt geen ruimte in.
Antwoord 15
Display: Geen
Het verwijdert het element uit de normale stroom van de pagina, waardoor andere elementen kunnen worden ingevuld.
Een element verschijnt helemaal niet op de pagina, maar we kunnen er nog steeds communiceren via de DOM.
Er zal geen ruimte zijn toegewezen tussen de andere elementen.
zichtbaarheid: verborgen
Het laat het element achter in de normale stroom van de pagina die nog steeds ruimte inneemt.
Er is een element niet zichtbaar en de ruimte van het element wordt hiervoor toegewezen op de pagina.
enkele andere manieren om elementen
te verbergen
Gebruik z-index
#element {
z-index: -11111;
}
Verplaats een element van de pagina
#element {
position: absolute;
top: -9999em;
left: -9999em;
}
Interessant informatie over zichtbaarheid: verborgen en weergave: Geen Eigenschappen
visibility:hidden
en display:none
Zal even performant zijn, omdat ze allebei de lay-out, verf en composiet opnieuw triggeren. opacity: 0
is functionaliteit gelijk aan visibility:hidden
en triggeert de lay-outstap niet.
En CSS-overgangseigenschap is ook belangrijk waar we op moeten letten. Omdat het schakelen van visibility: hidden
naar visibility: visible
het gebruik van CSS-overgangen mogelijk maakt, terwijl het omschakelen van display: none
naar display: block
niet. visibility: hidden
heeft als bijkomend voordeel dat het geen JavaScript-gebeurtenissen vastlegt, terwijl opacity: 0
gebeurtenissen vastlegt
Antwoord 16
Een ander verschil is dat visibility:hidden
werkt in heel, heel oude browsers, en display:none
niet:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
Antwoord 17
Het verschil gaat verder dan stijl en wordt weerspiegeld in hoe de elementen zich gedragen wanneer ze worden gemanipuleerd met JavaScript.
Effecten en bijwerkingen van display: none
:
- het doelelement wordt uit de documentstroom gehaald (heeft geen invloed op de lay-out van andere elementen);
- alle nakomelingen worden beïnvloed (worden ook niet weergegeven en kunnen niet “uit deze erfenis” worden gehaald);
- metingen kunnen niet worden gedaan voor het doelelement noch voor zijn afstammelingen – ze worden helemaal niet weergegeven, dus hun
clientWidth
,clientHeight
,offsetWidth
,offsetHeight
,scrollWidth
,scrollHeight
,getBoundingClientRect()
,getComputedStyle()
, geven allemaal0
s terug.
Effecten en bijwerkingen van visibility: hidden
:
- het doel element wordt aan het zicht onttrokken, maar is niet genomen uit de stroom en beïnvloedt de lay-out, het bezetten van de normale ruimte;
innerText
(maar nietinnerHTML
) van het doelelement en afstammelingen rendement lege string.
Antwoord 18
display:none;
zal noch het element weer te geven, noch zal het toe te wijzen ruimte voor het element op de pagina, terwijl visibility:hidden;
zal niet het element op de pagina weer te geven maar zal ruimte toe te wijzen op de pagina.
We kunnen toegang krijgen tot het element in DOM in beide gevallen.
Om het te begrijpen op een betere manier kunt u kijken op de volgende code:
display: none vs visibility: hidden
Antwoord 19
Er zijn veel gedetailleerde antwoorden hier, maar ik dacht dat ik zou deze toe te voegen aan het adres toegankelijkheid want er zijn implicaties.
display:none;
en visibility:hidden;
kan niet worden gelezen door alle screen reader software. Houd in gedachten wat visueel gehandicapte gebruikers zullen ervaren.
De kwestie vraagt ook naar synoniemen. text-indent: -9999px;
een andere die ongeveer gelijk. Het belangrijkste verschil met de text-indent
is dat het vaak zal worden gelezen door schermlezers. Het kan een beetje een slechte ervaring als gebruikers nog steeds tabblad om de link.
Voor de toegankelijkheid, wat ik zie gebruikte vandaag is een combinatie van stijlen om een element te verbergen terwijl ze zichtbaar voor schermlezers.
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
Een goede gewoonte is om een link ‘Ga naar inhoud’ te maken naar het anker van het hoofdgedeelte van de inhoud. Gebruikers met een visuele beperking willen waarschijnlijk niet op elke pagina naar uw volledige navigatiestructuur luisteren. Maak de link visueel verborgen. Gebruikers kunnen gewoon op tab klikken om toegang te krijgen tot de link.
Voor meer informatie over toegankelijkheid en verborgen inhoud, zie: