Proprietà di visualizzazione Style

Definizione e uso

display Imposta o restituisce il tipo di visualizzazione dell'elemento.

La maggior parte degli elementi HTML sono "inline" o "block": gli elementi inline hanno contenuti fluttuanti sia a sinistra che a destra. Gli elementi block riempiono l'intera riga e non è possibile visualizzare alcun contenuto a sinistra o a destra.

display l'attributo permette anche agli autori di visualizzare o nascondere l'elemento. È simile alla proprietà visibility. Tuttavia, se impostato display:none, nasconde l'intero elemento e visibility:hidden Significa che il contenuto dell'elemento non sarà visibile, ma l'elemento manterrà la sua posizione e dimensione originale.

Suggerimento:Se l'elemento è un elemento bloccante, può anche modificare il tipo di visualizzazione tramite l'attributo float.

Vedi anche:

Tutorial CSS:CSS Display e visibility

Manuale CSS:Proprietà display

Esempio

Esempio 1

Impostare di non visualizzare l'elemento <div>:

document.getElementById("myDIV").style.display = "none";

Prova tu stesso

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 visualizzare un elemento:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

Prova tu stesso

Esempio 4

La differenza tra "inline", "block" e "none":
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Prova tu stesso

Esempio 5

Restituisce il tipo di visualizzazione dell'elemento <p>:

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

Prova tu stesso

Sintassi

Restituisce l'attributo display:

object.style.display

Imposta l'attributo display:

object.style.display = value

Valore dell'attributo

Valore Descrizione
block L'elemento viene rappresentato come un elemento bloccante.
compact L'elemento viene presentato come un elemento bloccante o inline. Dipende dal contesto.
flex L'elemento viene presentato come un contenitore flexbox bloccante. Nuova funzionalità di CSS3.
inline L'elemento viene presentato come un elemento inline. Predefinito.
inline-block L'elemento viene presentato come una casella inline di blocco.
inline-flex L'elemento viene presentato come un contenitore inline di flexbox. Nuova funzionalità di CSS3.
inline-table L'elemento viene presentato come una tabella inline (ad esempio <table>), senza interlinea prima e dopo la tabella.
list-item L'elemento viene presentato come un elenco.
marker

Questo valore imposta il contenuto prima o dopo la casella a un marchio (marker)

Usato insieme ai pseudo-elementi :before e :after. Altrimenti questo valore è lo stesso di "inline".
none L'elemento non viene visualizzato.
run-in L'elemento viene presentato come un elemento bloccante o inline. Dipende dal contesto.
table L'elemento viene presentato come una tabella bloccante (block table) (ad esempio <table>), con un'interlinea prima e dopo la tabella.
table-caption L'elemento viene presentato come un'intestazione di tabella (ad esempio <caption>).
table-cell L'elemento viene presentato come una cella di tabella (ad esempio <td> e <th>).
table-column L'elemento viene presentato come una colonna di cella (ad esempio <col>).
table-column-group L'elemento viene presentato come un gruppo di colonne (ad esempio <colgroup>).
table-footer-group L'elemento viene presentato come una riga di piè di pagina di tabella (ad esempio <tfoot>).
table-header-group L'elemento viene presentato come una riga di intestazione di tabella (ad esempio <thead>).
table-row L'elemento viene presentato come una riga di tabella (ad esempio <tr>).
table-row-group L'elemento viene presentato come un gruppo di righe (ad esempio <tbody>).
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: inline
Valore di ritorno: Stringa che rappresenta il tipo di visualizzazione dell'elemento.
Versione CSS: CSS1

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto