Stijl zichtbaarheid Eigenschap
Voorbeeld
Verberg de inhoud van een <p> element:
document.getElementById("myP").style.visibility = "hidden";
Definitie en gebruik
De zichtbaarheidseigenschap bepaalt of retourneert of een element zichtbaar moet zijn.
Met de eigenschap zichtbaarheid kan de auteur een element tonen of verbergen. Het is vergelijkbaar met de eigenschap display . Het verschil is echter dat als u instelt display:none
, het hele element wordt verborgen, terwijl visibility:hidden
de inhoud van het element onzichtbaar is, maar het element in zijn oorspronkelijke positie en grootte blijft.
Browserondersteuning
Property | |||||
---|---|---|---|---|---|
visibility | Yes | Yes | Yes | Yes | Yes |
Syntaxis
Retourneer de eigenschap zichtbaarheid:
object.style.visibility
Stel de zichtbaarheidseigenschap in:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Eigendomswaarden
Value | Description |
---|---|
visible | The element is visible. This is default |
hidden | The element is not visible, but still affects layout |
collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Technische details
Standaardwaarde: | zichtbaar |
---|---|
Winstwaarde: | Een tekenreeks die aangeeft of de inhoud van een element wordt weergegeven of niet |
CSS-versie | CSS2 |
Meer voorbeelden
Voorbeeld
Verschil tussen de eigenschap display en de eigenschap zichtbaarheid:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Voorbeeld
Wissel tussen verbergen en tonen van een element:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Voorbeeld
Verberg en toon een <img> element:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Voorbeeld
Retourneer het zichtbaarheidstype van een <p>-element:
alert(document.getElementById("myP").style.visibility);
Gerelateerde pagina's
CSS-zelfstudie: CSS-weergave en zichtbaarheid
CSS-referentie: eigenschap zichtbaarheid
❮ Stijlobject