Style display Property

Esempio

Impostare un <div> elemento di non essere visualizzato:

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

Definizione e l'utilizzo

Gli insiemi di proprietà di visualizzazione o restituisce il tipo di visualizzazione dell'elemento.

Elementi in HTML sono per lo più "inline" o "block" elementi: un elemento inline ha contenuto sul lato destro e sinistro flottante. Un elemento di blocco riempie l'intera linea, e nulla può essere visualizzato sul lato sinistro o destro.

La proprietà display permette anche l'autore per mostrare o nascondere un elemento. E 'simile alla visibilità proprietà. Tuttavia, se si imposta display: none, si nasconde l'intero elemento, mentre visibility: hidden significa che il contenuto dell'elemento saranno invisibili, ma l'elemento rimane nella sua posizione e le dimensioni originali.

Tip: Se un elemento è un elemento di blocco, il tipo di visualizzazione può essere modificata anche con la proprietà float.

Supporto browser

La proprietà di visualizzazione è supportata in tutti i principali browser.

Sintassi

Restituire la proprietà di visualizzazione:

object .style.display

Impostare la proprietà di visualizzazione:

object .style.display= I valori delle proprietà

Valore	Descrizione
block	Elemento è visualizzata come un elemento di blocco
compact	Elemento viene reso come un block-level o elemento in linea. Dipende dal contesto
flex	Element è reso come una scatola di flessione a livello di blocco. Nuovo in CSS3
inherit	Il valore della proprietà di visualizzazione è ereditato da elemento padre
inline	Elemento viene reso come un elemento in linea. Questa è l'impostazione predefinita
inline-block	Elemento viene visualizzata come un blocco all'interno di una scatola in linea
inline-flex	Element è reso come una scatola di flessione a livello di riga. Nuovo in CSS3
inline-table	Element è reso come una tabella in linea (come <table>), senza alcuna interruzione di linea prima o dopo la tabella
list-item	Element è reso come una lista
marker	Questo valore imposta contenuto prima o dopo una casella per essere un marcatore (usato con: prima e:. Dopo pseudo-elementi Altrimenti questo valore è identico a "in linea")
none	L'elemento non verrà visualizzato
run-in	Elemento è reso come livello di blocco o elemento in linea. Dipende dal contesto
table	Elemento è visualizzata come un blocco di tabella (come <table>), con un intervallo di linea prima e dopo la tabella
table-caption	Element è reso come una didascalia di tabella (come <caption>)
table-cell	Element è reso come una cella di tabella (come <td> e <th>)
table-column	Elemento è reso come una colonna di celle (like <col>)
table-column-group	Elemento è reso come un gruppo di una o più colonne (like <colgroup>)
table-footer-group	Element è reso come una riga della tabella piè di pagina (like <tfoot>)
table-header-group	Elemento è reso come una riga di intestazione di tabella (like <thead>)
table-row	Elemento è reso come una riga della tabella (come <tr>)
table-row-group	Elemento è reso come un gruppo di una o più righe (like <tbody>)
initial	Consente di impostare questa proprietà al suo valore di default. Leggi iniziale
inherit	Eredita questo immobile dal suo elemento genitore. Leggi su erediterà

Dettagli tecnici

Valore di default:	in linea
Valore di ritorno:	Una stringa, che rappresenta il tipo di visualizzazione di un elemento
CSS Version	CSS1

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";
}

Prova tu stesso "

Esempio

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 "