Welke manieren zijn er om een HTML-element op een webpagina te verbergen?

• display: none; - het element wordt volledig verwijderd uit de stroom van het document, neemt geen ruimte in en gebeurtenissen worden niet verwerkt. De meest "krachtige" manier om te verbergen.
• visibility: hidden; - het element blijft in de stroom van het document, behoudt zijn plek, maar is niet zichtbaar. Muisevenementen en toetsenbourevenementen worden niet verwerkt.
• opacity: 0; - het element blijft in de stroom van het document, behoudt zijn plek, is niet zichtbaar. Muisevenementen en toetsenbourevenementen worden verwerkt (je kunt klikken, de cursor eroverheen bewegen, enz.). Het element wordt gewoon volledig transparant.
• position: absolute; en het instellen van coördinaten buiten het zichtbare gebied (bijvoorbeeld, left: -9999px;). Het element wordt uit de normale stroom verwijderd, maar is nog steeds op de pagina aanwezig en kan invloed hebben op scrollen. Gebeurtenissen worden verwerkt.
• width: 0; height: 0; overflow: hidden; - het element blijft in de stroom, maar de afmetingen worden op nul gezet. Gebeurtenissen kunnen worden verwerkt als hun gebied in het zichtbare deel van een ander element valt.
• font-size: 0; en line-height: 0; (om tekstinhoud te verbergen). Behoudt het element, maar maakt de tekst onzichtbaar.
• Gebruik van pseudo-element :empty (niet voor alle elementen en gevallen). Verbergt de inhoud als het element leeg is.

De keuze van de methode hangt af van het gewenste gedrag: of het element ruimte moet innemen, gebeurtenissen moet verwerken of volledig uit de stroom moet worden verwijderd.