Stil görüntüleme Özellik
Örnek
Bir <div> öğesini görüntülenmeyecek şekilde ayarlayın:
document.getElementById("myDIV").style.display = "none";
Tanım ve Kullanım
display özelliği, öğenin görüntüleme türünü ayarlar veya döndürür.
HTML'deki öğeler çoğunlukla "satır içi" veya "blok" öğelerdir: Bir satır içi öğenin sol ve sağ tarafında kayan içerik bulunur. Bir blok öğesi tüm satırı doldurur ve sol veya sağ tarafında hiçbir şey görüntülenemez.
Display özelliği ayrıca yazarın bir öğeyi göstermesine veya gizlemesine izin verir. Görünürlük özelliğine benzer . Ancak, ayarlarsanız display:none, tüm öğeyi gizler ve öğenin visibility:hiddeniçeriğinin görünmez olacağı, ancak öğenin orijinal konumunda ve boyutunda kalacağı anlamına gelir.
İpucu: Bir öğe bir blok öğesiyse, görüntüleme türü de float özelliğiyle değiştirilebilir.
Tarayıcı Desteği
| Property | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
display özelliğini döndürün:
object.style.display
Görüntüleme özelliğini ayarlayın:
object.style.display = value
Mülk değerleri
| Value | Description |
|---|---|
| block | Element is rendered as a block-level element |
| compact | Element is rendered as a block-level or inline element. Depends on context |
| flex | Element is rendered as a block-level flex box. New in CSS3 |
| inline | Element is rendered as an inline element. This is default |
| inline-block | Element is rendered as a block box inside an inline box |
| inline-flex | Element is rendered as a inline-level flex box. New in CSS3 |
| inline-table | Element is rendered as an inline table (like <table>), with no line break before or after the table |
| list-item | Element is rendered as a list |
| marker | This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline") |
| none | Element will not be displayed |
| run-in | Element is rendered as block-level or inline element. Depends on context |
| table | Element is rendered as a block table (like <table>), with a line break before and after the table |
| table-caption | Element is rendered as a table caption (like <caption>) |
| table-cell | Element is rendered as a table cell (like <td> and <th>) |
| table-column | Element is rendered as a column of cells (like <col>) |
| table-column-group | Element is rendered as a group of one or more columns (like <colgroup>) |
| table-footer-group | Element is rendered as a table footer row (like <tfoot>) |
| table-header-group | Element is rendered as a table header row (like <thead>) |
| table-row | Element is rendered as a table row (like <tr>) |
| table-row-group | Element is rendered as a group of one or more rows (like <tbody>) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Teknik detaylar
| Varsayılan değer: | Çizgide |
|---|---|
| Geri dönüş değeri: | Bir öğenin görüntüleme türünü temsil eden bir Dize |
| CSS Sürümü | CSS1 |
Daha fazla örnek
Örnek
Display özelliği ile görünürlük özelliği arasındaki fark:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Örnek
Bir öğeyi gizleme ve gösterme arasında geçiş yapın:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Örnek
"Satır içi", "blok" ve "yok" arasındaki fark:
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
Örnek
Bir <p> öğesinin görüntüleme türünü döndürün:
alert(document.getElementById("myP").style.display);
İlgili Sayfalar
CSS eğitimi: CSS Görüntüleme ve görünürlük
CSS referansı: görüntüleme özelliği
❮ Stil Nesnesi