Wat is het verschil tussen zichtbaarheid:hidden en display:none?

De CSS-regels visibility:hiddenen display:noneresulteren er beide in dat het element niet zichtbaar is. Zijn dit synoniemen?


Antwoord 1, autoriteit 100%

display:nonebetekent 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:hiddenbetekent 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:noneresulteert in:

test |   | test

Het vervangen van [style-tag-value]door visibility:hiddenresulteert in:

test |                        | test

Antwoord 2, autoriteit 16%

Het zijn geen synoniemen.

display:noneverwijdert het element uit de normale stroom van de pagina, waardoor andere elementen kunnen invullen.

visibility:hiddenlaat 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:noneVerwijdert het element van de lay-outstroom.

visibility:hiddenverbergt 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:noneVerwijdert het element uit de stroom van de pagina en de rest van de pagina Flows alsof het er niet was.

visibility:hiddenverbergt het element van weergave, maar niet de paginale stroom, waardoor er ruimte voor is op de pagina.


Antwoord 7

display:noneVerwijdert het element van de pagina volledig, en de pagina is gebouwd alsof het element er helemaal niet was.

visibility:hiddenLaat 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:hiddenHet object neemt nog steeds verticale hoogte op de pagina. Met display:noneHet 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:noneVerbergt het element en de ineenstorting van de ruimte is het opnemen, terwijl visibility:hiddenzal 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:hiddenBehoudt de ruimte; display:noneNIET.


Antwoord 11

Naast alle andere antwoorden is er een belangrijk verschil voor IE8: als u display:nonegebruikt 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: hiddenbehoudt de ruimte, terwijl display: nonede 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>

Details bekijken


Antwoord 14

visibility:hiddenhoudt het element op de pagina en bezet deze ruimte, maar toont niet aan de gebruiker.

display:noneis 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:hiddenen display:noneZal even performant zijn, omdat ze allebei de lay-out, verf en composiet opnieuw triggeren. opacity: 0is functionaliteit gelijk aan visibility:hiddenen triggeert de lay-outstap niet.

En CSS-overgangseigenschap is ook belangrijk waar we op moeten letten. Omdat het schakelen van visibility: hiddennaar visibility: visiblehet gebruik van CSS-overgangen mogelijk maakt, terwijl het omschakelen van display: nonenaar display: blockniet. visibility: hiddenheeft als bijkomend voordeel dat het geen JavaScript-gebeurtenissen vastlegt, terwijl opacity: 0gebeurtenissen vastlegt


Antwoord 16

Een ander verschil is dat visibility:hiddenwerkt in heel, heel oude browsers, en display:noneniet:

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 allemaal 0s 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 niet innerHTML) 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-indentis 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:

Other episodes