Attributo visibility del Style

Definizione e uso

visibility L'attributo imposta o restituisce se l'elemento dovrebbe essere visibile.

visibility L'attributo permette all'autore di mostrare o nascondere l'elemento.

Questo attributo è simile a Attributo display. Ma la differenza è che se si imposta display:none, nascondendo l'intero elemento, mentre visibility:hidden Significa che il contenuto dell'elemento non sarà visibile, ma l'elemento stesso manterrà la sua posizione e dimensione originale.

Vedi anche:

Corso CSS:CSS Display e visibility

Manuale CSS:Attributo visibility

Esempio

Esempio 1

Nascondere il contenuto dell'elemento <p>:

document.getElementById("myP").style.visibility = "hidden";

Prova tu stesso

Più esempi sono disponibili nella parte inferiore della pagina.

Sintassi

Restituire l'attributo visibility:

oggetto.style.visibility

Impostare l'attributo visibility:

oggetto.style.visibility = "visible|hidden|collapse|initial|inherit"

Valore dell'attributo

Valore Descrizione
visible Questo elemento è visibile. Predefinito.
hidden L'elemento è invisibile, ma influisce ancora sul layout.
collapse Quando utilizzato su una riga o cella della tabella, l'elemento è invisibile (uguale a "hidden").
initial Imposta questo attributo al suo valore predefinito. Vedi initial。
inherit Erede questo attributo dal suo elemento padre. Vedi inherit。

Dettagli tecnici

Valore predefinito: visible
Valore di ritorno: Stringa che rappresenta se l'elemento è visibile o meno.
Versione CSS: CSS2

Supporto dei browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporta Supporta Supporta Supporta Supporta

Più esempi

Esempio 2

La differenza tra le proprietà display e visibility:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Prova tu stesso

Esempio 3

cambiare tra nascondere e mostrare gli elementi:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

Prova tu stesso

Esempio 4

nascondere e mostrare l'elemento <img>:

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

Prova tu stesso

Esempio 5

Restituisce il tipo di visibilità dell'elemento <p>:

alert(document.getElementById("myP").style.visibility);

Prova tu stesso