Style display özelliği

Tanım ve kullanım

display Özellik ayarları veya elementin görüntü türünü döndürür.

HTML'deki elementler çoğunlukla 'satır içi' veya 'blok' elementlerdir: satır içi elementlerin sol ve sağ kenarlarında kayan içerikler vardır. Blok elementler tüm satırı doldurur ve sol veya sağ kenarında herhangi bir içerik gösterilemez.

display özellikleri yazarın öğeyi gösterme veya gizleme yeteneğini sağlar. Bu, visibility özelliğine benzer, ancak display:nonetüm öğeyi gizleyecek ve visibility:hidden anlamına gelir ki öğenin içeriği görünmez olacaktır, ancak öğe orijinal konumunu ve boyutunu koruyacaktır.

İpucu:Eğer öğe blok öğesi ise, float özelliği de kullanılarak görüntüleme türünü değiştirebilir.

Ayrıca bkz:

CSS Eğitimi:CSS Display ve visibility

CSS Referans Kılavuzu:display özelliği

Örnek

Örnek 1

Görünmez hale gelen <div> öğesini ayarlamak:

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

Deneyin

Örnek 2

display özelliği ve visibility özelliği arasındaki farklar:

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

Deneyin

Örnek 3

Öğe gizlemek ve göstermek arasında geçiş yapma:

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

Deneyin

Örnek 4

"inline"、"block" ve "none" arasındaki farklar:
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Deneyin

Örnek 5

<p> elementinin görüntüleme türünü döndürün：

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

Deneyin

Gramer

display özelliğini döndürün：

object.style.display

display özelliğini ayarlayın：

object.style.display = value

Özellik değeri

Değer Açıklama
block Element, blok element olarak render edilir.
compact Element, blok veya satır içi element olarak görüntülenir. İçerikten bağımlıdır.
flex Element, blok düzeyde esnek çerçeve olarak görüntülenir. CSS3'teki yeni bir özellik.
inline Element, satır içi element olarak görüntülenir. Öntanımlı.
inline-block Element, satır içi çerçeve içindeki blok çerçevesi olarak (örneğin <table>) görüntülenir.
inline-flex Element, satır içi düzeyde esnek çerçeve olarak (örneğin <table>) görüntülenir. CSS3'teki yeni bir özellik.
inline-table Element, satır içi bir tablo olarak (örneğin <table>) görüntülenir, tablo başında ve sonunda satır boşluğu yoktur.
list-item Element, bir liste olarak görüntülenir.
marker

Bu değer, etiketin önce veya sonundaki içeriği işaret (marker) olarak ayarlar

:before ve :after sahte elementleri ile birlikte kullanılır. Aksi takdirde bu değer 'inline' ile aynıdır.
none Element görüntülenmez.
run-in Element, blok veya satır içi element olarak görüntülenir. İçerikten bağımlıdır.
table Element, bir blok tablosu (block table) olarak (örneğin <table>) görüntülenir, tablo başında ve sonunda satır boşluğu vardır.
table-caption Element, bir tablo başlığı olarak (örneğin <caption>) görüntülenir.
table-cell Element, bir tablo hücresi olarak (örneğin <td> ve <th>) görüntülenir.
table-column Element, bir hücre sütunu olarak (örneğin <col>) görüntülenir.
table-column-group Element, bir sütun veya çok sayıda sütun grubu olarak (örneğin <colgroup>) görüntülenir.
table-footer-group Element, bir tablo altçerçeve satırı olarak (örneğin <tfoot>) görüntülenir.
table-header-group Element, bir tablo başlık satırı olarak (örneğin <thead>) görüntülenir.
table-row Element, bir tablo satırı olarak (örneğin <tr>) görüntülenir.
table-row-group Element, bir satır veya çok sayıda satır grubu olarak (örneğin <tbody>) görüntülenir.
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial。
inherit Bu özelliği ebeveyn elementinden miras alır. Bakınız inherit。

Teknik ayrıntılar

Öntanımlı değer： inline
Dönüş değeri： Dizi,元素的 görüntüleme türünü belirtir.
CSS sürümü： CSS1

Tarayıcı desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek