Properti tampilan Style display

Definisi dan penggunaan

display Aturan setting atau pengembalian tipe tampilan elemen.

Elemen dalam HTML sebagian besar adalah elemen “baris” atau “blok”：elemen baris memiliki konten yang mengambang di sebelah kiri dan kanan. Elemen blok mengisi seluruh baris, dan tidak dapat menampilkan konten apapun di sebelah kiri atau kanan.

display atribut juga memungkinkan penulis untuk menampilkan atau menyembunyikan elemen. Ini mirip dengan atribut visibility. Tetapi, jika diatur display:none, yang akan menyembunyikan seluruh elemen, dan visibility:hidden berarti konten elemen akan tak terlihat, tetapi elemen akan tetap mempertahankan posisi dan ukurannya aslinya.

Petunjuk:Jika elemen adalah elemen blok, juga dapat mengubah tipe tampilannya melalui atribut float.

Lihat pula:

Panduan CSS:CSS Display dan visibility

Panduan Referensi CSS:Atribut display

Contoh

Contoh 1

Atur untuk tidak menampilkan elemen <div>:

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

Coba sendiri

Contoh 2

Perbedaan antara atribut display dan visibility:

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

Coba sendiri

Contoh 3

Beralih antara menyembunyikan dan menampilkan elemen:

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

Coba sendiri

Contoh 4

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

Coba sendiri

Contoh 5

Kembalikan tipe tampilan elemen <p>:

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

Coba sendiri

Sintaks

Kembalikan atribut display:

object.style.display

Atur atribut display:

object.style.display = value

Nilai atribut

Nilai Deskripsi
block Elemen ditampilkan sebagai elemen blok.
compact Elemen ditampilkan sebagai elemen blok atau inline. Tergantung konteks.
flex Elemen ditampilkan sebagai boks elastic blok. Fitur baru di CSS3.
inline Elemen ditampilkan sebagai elemen inline. Default.
inline-block Elemen ditampilkan sebagai boks blok di dalam boks inline.
inline-flex Elemen ditampilkan sebagai boks elastic inline. Fitur baru di CSS3.
inline-table Elemen ditampilkan sebagai tabel inline (seperti <table>), tanpa paragraf baru sebelum dan setelah tabel.
list-item Elemen ditampilkan sebagai daftar.
marker

Nilai ini akan mengatur konten sebelum atau setelah boks menjadi tanda (marker)

Dipakai bersama dengan pseudo-element :before dan :after. Lainnya nilai ini sama dengan "inline".
none Elemen tidak ditampilkan.
run-in Elemen ditampilkan sebagai elemen blok atau inline. Tergantung konteks.
table Elemen ditampilkan sebagai tabel blok (block table) (seperti <table>), dengan paragraf baru sebelum dan setelah tabel.
table-caption Elemen ditampilkan sebagai judul tabel (seperti <caption>).
table-cell Elemen ditampilkan sebagai sel tabel (seperti <td> dan <th>).
table-column Elemen ditampilkan sebagai kolom sel (seperti <col>).
table-column-group Elemen ditampilkan sebagai grup kolom tabel (seperti <colgroup>).
table-footer-group Elemen ditampilkan sebagai baris kaki tabel (seperti <tfoot>).
table-header-group Elemen ditampilkan sebagai baris judul tabel (seperti <thead>).
table-row Elemen ditampilkan sebagai baris tabel (seperti <tr>).
table-row-group Elemen ditampilkan sebagai grup baris tabel (seperti <tbody>).
initial Atur atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat inherit.

Detil teknis

Nilai default: inline
Nilai kembalian: String, menunjukkan tipe tampilan elemen.
Versi CSS: CSS1

Dukungan browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan