Properti display style

Definisi dan penggunaan

display Set atau mengembalikan tipe tampilan elemen.

Element dalam HTML kebanyakan adalah elemen “baris” atau “bloc” : kiri dan kanan elemen baris mempunyai kandungan yang menggerak. Elemen bloc memenuhi baris penuh, kiri atau kanannya tidak dapat menampilkan kandungan lain.

display properti juga membenarkan penulis untuk menampilkan atau menyembunyikan elemen. Ia serupa dengan properti visibility. Tetapi, jika diatur display:none, ia akan menyembunyikan seluruh elemen, sementara visibility:hidden Maknanya isi elemen akan tak dapat dilihat, tetapi elemen akan tetap mempertahankan lokasi dan saiz asalnya.

Panduan:Jika elemen adalah elemen blok, jenis papan tampilannya juga boleh diubah melalui properti float.

Lihat juga:

Panduan CSS:CSS Display dan visibility

Panduan CSS:Properti display

Contoh

Contoh 1

Tetapkan untuk tidak menampilkan elemen <div>:

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

Coba sendiri

Contoh 2

Perbezaan antara properti display dan visibility:

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

Coba sendiri

Contoh 3

Berganti 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

Perbezaan "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 jenis 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 dirender sebagai elemen blok.
compact Elemen dipaparkan sebagai elemen blok atau inline. Tergantung konteks.
flex Elemen dipaparkan sebagai boks flexi blok. Karakteristik baru CSS3.
inline Elemen dipaparkan sebagai elemen inline. Baku.
inline-block Elemen dipaparkan sebagai boks blok dalam boks inline.
inline-flex Elemen dipaparkan sebagai boks flexi inline. Karakteristik baru CSS3.
inline-table Elemen dipaparkan sebagai tabel inline (seperti <table>), tanpa paragraf sebelumnya dan setelahnya.
list-item Elemen dipaparkan sebagai daftar.
marker

Nilai ini akan mengatur konten sebelum atau setelah boks

Dipakai bersama :before dan :after pseudo-element. Lainnya nilai ini sama dengan "inline".
none Elemen ini tidak dipaparkan.
run-in Elemen dipaparkan sebagai elemen blok atau inline. Tergantung konteks.
table Elemen dipaparkan sebagai tabel blok (block table) (seperti <table>), dengan paragraf yang berubah untuk tabel sebelumnya dan setelahnya.
table-caption Elemen dipaparkan sebagai judul tabel (seperti <caption>).
table-cell Elemen dipaparkan sebagai sel tabel (seperti <td> dan <th>).
table-column Elemen dipaparkan sebagai kolom sel (seperti <col>).
table-column-group Elemen dipaparkan sebagai grup kolom tabel (seperti <colgroup>).
table-footer-group Elemen dipaparkan sebagai baris kaki tabel (seperti <tfoot>).
table-header-group Elemen dipaparkan sebagai baris judul tabel (seperti <thead>).
table-row Elemen dipaparkan sebagai baris tabel (seperti <tr>).
table-row-group Elemen dipaparkan sebagai grup baris tabel (seperti <tbody>).
initial Tetapkan atribut ini ke nilai baku. Lihat initial。
inherit Mewarisi atribut ini dari elemen induknya. Lihat inherit。

Rangkaian teknologi

Nilai baku: inline
Hasil balik: String, menunjukkan jenis tampilan elemen.
Versi CSS: CSS1

Dukungan pereka

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