Style display Property

Exemplu

Setați un <div> element să nu fie afișat:

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

Definiție și utilizare

Afișajul seturi de proprietate sau returnează tipul de afișare elementului.

Elementele în HTML sunt în mare parte "inline" sau "block" elemente: Un element inline are un conținut pe partea stângă și dreaptă plutitoare. Un element de bloc umple întreaga linie, și nimic nu poate fi afișată pe partea stângă sau dreaptă.

Proprietatea de afișare permite, de asemenea, autorul a afișa sau ascunde un element. Este similar cu vizibilitatea proprietate. Cu toate acestea, dacă setați afișare: nici unul, se ascunde întregului element, în timp ce vizibilitatea: ascuns înseamnă că conținutul elementului va fi invizibil, dar elementul rămâne în poziția sa inițială și dimensiunea.

Tip: În cazul în care un element este un element de bloc, tipul de afișare poate fi schimbat cu proprietatea float.

Suport pentru browser-

Proprietatea de afișare este acceptată în toate browserele majore.

Sintaxă

Întoarcere proprietatea de afișare:

object .style.display

Setați proprietatea de afișare:

object .style.display= Valori de proprietate

Valoare	Descriere
block	Elementul este redat ca un element de nivel bloc
compact	Elementul este redat ca un nivel de bloc sau un element inline. Depinde de context
flex	Elementul este redat ca o cutie flex nivel bloc. Nou în CSS3
inherit	Valoarea proprietății de afișare este moștenit de la elementul părinte
inline	Elementul este redat ca un element inline. Acest lucru este implicit
inline-block	Elementul este redat ca o cutie de bloc într-o cutie inline
inline-flex	Elementul este redat ca o cutie flex nivel de linie. Nou în CSS3
inline-table	Elementul este redat sub forma unui tabel de linie (cum ar fi <table>), cu nici o pauză linie înainte sau după masă
list-item	Elementul este redat ca o listă
marker	Această valoare setează conținutul înainte sau după o cutie pentru a fi un marker (utilizat cu: înainte și:. După pseudo-elementele Altfel, această valoare este identică cu „inline“)
none	Elementul nu va fi afișat
run-in	Elementul este redat ca bloc de nivel sau un element inline. Depinde de context
table	Elementul este redat sub forma unui tabel bloc (cum ar fi <table>), cu o pauză de linie înainte și după masa
table-caption	Elementul este redat ca legendă tabel (cum ar fi <caption>)
table-cell	Elementul este redat ca o celulă de tabel (cum ar fi <td> si <th>)
table-column	Elementul este redat ca o coloană de celule (like <col>)
table-column-group	Elementul este redat ca un grup de una sau mai multe coloane (like <colgroup>)
table-footer-group	Elementul este redat ca un rând de tabel subsol (like <tfoot>)
table-header-group	Elementul este redat ca un rând antet tabel (like <thead>)
table-row	Elementul este redat ca un rând de tabel (cum ar fi <tr>)
table-row-group	Elementul este redat ca un grup de una sau mai multe rânduri (like <tbody>)
initial	Setează această proprietate la valoarea implicită. Citiți despre inițială
inherit	Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc

Detalii tehnice

Valoare implicită:	in linie
Întoarcere Valoare:	Un șir, care reprezintă tipul de afișare al unui element
CSS Versiune	CSS1

Mai multe exemple

Exemplu

Diferența dintre proprietatea de afișare și proprietatea de vizibilitate:

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

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

Încearcă - l singur »

Exemplu

Diferența dintre "inline" , "block" și "none" :

function myFunction(x) {
    var whichSelected = x.selectedIndex;
    var sel = x.options[whichSelected].text;
    var elem = document.getElementById("mySpan");
    elem.style.display = sel;
}

Încearcă - l singur »