Proprietà visibilità stile
Esempio
Nascondi il contenuto di un elemento <p>:
document.getElementById("myP").style.visibility = "hidden";
Definizione e utilizzo
La proprietà di visibilità imposta o restituisce se un elemento deve essere visibile.
La proprietà di visibilità consente all'autore di mostrare o nascondere un elemento. È simile alla proprietà display . Tuttavia, la differenza è che se si imposta display:none, si nasconde l'intero elemento, mentre visibility:hiddensignifica che il contenuto dell'elemento sarà invisibile, ma l'elemento rimane nella sua posizione e dimensione originali.
Supporto browser
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Sintassi
Restituisce la proprietà di visibilità:
object.style.visibility
Imposta la proprietà di visibilità:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Valori di proprietà
| 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 |
Dettagli tecnici
| Valore di default: | visibile |
|---|---|
| Valore di ritorno: | Una stringa, che rappresenta se il contenuto di un elemento viene visualizzato o meno |
| Versione CSS | CSS2 |
Altri esempi
Esempio
Differenza tra la proprietà di visualizzazione e la proprietà di visibilità:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Esempio
Alterna tra nascondere e mostrare un elemento:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Esempio
Nascondi e mostra un elemento <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Esempio
Restituisce il tipo di visibilità di un elemento <p>:
alert(document.getElementById("myP").style.visibility);
Pagine correlate
Tutorial CSS: CSS Visualizzazione e visibilità
Riferimento CSS: proprietà di visibilità
❮ Oggetto stile