Style - Sichtbarkeitseigenschaft
Beispiel
Den Inhalt eines <p>-Elements ausblenden:
document.getElementById("myP").style.visibility = "hidden";
Definition und Verwendung
Die Eigenschaft "Sichtbarkeit" legt fest oder gibt zurück, ob ein Element sichtbar sein soll.
Die Sichtbarkeitseigenschaft ermöglicht es dem Autor, ein Element ein- oder auszublenden. Sie ähnelt der Anzeigeeigenschaft . Der Unterschied besteht jedoch darin, dass, wenn Sie festlegen display:none, das gesamte Element ausgeblendet visibility:hiddenwird, während bedeutet, dass der Inhalt des Elements unsichtbar ist, das Element jedoch an seiner ursprünglichen Position und Größe bleibt.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Syntax
Gibt die Sichtbarkeitseigenschaft zurück:
object.style.visibility
Legen Sie die Sichtbarkeitseigenschaft fest:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Eigenschaftswerte
| 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
| Standardwert: | sichtbar |
|---|---|
| Rückgabewert: | Ein String, der darstellt, ob der Inhalt eines Elements angezeigt wird oder nicht |
| CSS-Version | CSS2 |
Mehr Beispiele
Beispiel
Unterschied zwischen der Anzeigeeigenschaft und der Sichtbarkeitseigenschaft:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Beispiel
Umschalten zwischen Ausblenden und Anzeigen eines Elements:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Beispiel
Ein <img>-Element ausblenden und anzeigen:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Beispiel
Gibt den Sichtbarkeitstyp eines <p>-Elements zurück:
alert(document.getElementById("myP").style.visibility);
Verwandte Seiten
CSS-Tutorial: CSS-Anzeige und -Sichtbarkeit
CSS-Referenz: Sichtbarkeitseigenschaft
❮ Style-Objekt