Style display Property

Contoh

Menetapkan <div> elemen tidak ditampilkan:

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

Definisi dan Penggunaan

Tampilan set properti atau mengembalikan jenis tampilan elemen.

Elemen dalam HTML kebanyakan "inline" atau "block" unsur-unsur: Sebuah elemen inline telah mengambang konten pada sisi kiri dan kanan. Sebuah elemen blok mengisi seluruh lini, dan tidak ada yang dapat ditampilkan pada sisi kiri atau kanan.

Properti tampilan juga memungkinkan penulis untuk menampilkan atau menyembunyikan elemen. Hal ini mirip dengan visibilitas properti. Namun, jika Anda mengatur display: none, ia menyembunyikan seluruh elemen, sementara visibility: hidden berarti bahwa isi dari elemen akan terlihat, tetapi elemen tetap dalam posisi dan ukuran aslinya.

Tip: Jika elemen adalah elemen blok, jenis layar yang juga dapat diubah dengan properti float.

Dukungan Browser

Properti tampilan didukung di semua browser utama.

Sintaksis

Kembali properti display:

object .style.display

Mengatur properti display:

object .style.display= Nilai properti

Nilai	Deskripsi
block	Elemen diberikan sebagai elemen blok-tingkat
compact	Elemen diberikan sebagai blok-tingkat atau elemen inline. Tergantung pada konteks
flex	Elemen diberikan sebagai kotak fleksibel blok-tingkat. Baru di CSS3
inherit	Nilai properti tampilan diwariskan dari elemen induk
inline	Elemen diberikan sebagai elemen inline. Ini adalah default
inline-block	Elemen diberikan sebagai kotak blok di dalam sebuah kotak inline
inline-flex	Elemen diberikan sebagai kotak fleksibel inline-tingkat. Baru di CSS3
inline-table	Elemen diberikan sebagai tabel inline (seperti <table>), dengan tidak ada garis istirahat sebelum atau setelah tabel
list-item	Elemen diberikan sebagai daftar
marker	Nilai ini menetapkan konten sebelum atau setelah kotak menjadi penanda (digunakan dengan: sebelum dan:. setelah pseudo-elemen Jika nilai ini identik dengan "inline")
none	Elemen tidak akan ditampilkan
run-in	Elemen diterjemahkan sebagai blok-tingkat atau elemen inline. Tergantung pada konteks
table	Elemen diberikan sebagai tabel blok (seperti <table>), dengan satu baris sebelum dan sesudah meja
table-caption	Elemen diberikan sebagai caption tabel (seperti <caption>)
table-cell	Elemen diberikan sebagai sel tabel (seperti <td> dan <th>)
table-column	Elemen diberikan sebagai kolom sel (like <col>)
table-column-group	Elemen diberikan sebagai kelompok dari satu atau lebih kolom (like <colgroup>)
table-footer-group	Elemen diberikan sebagai baris tabel footer (like <tfoot>)
table-header-group	Elemen diberikan sebagai baris header tabel (like <thead>)
table-row	Elemen diberikan sebagai baris tabel (seperti <tr>)
table-row-group	Elemen diberikan sebagai kelompok dari satu atau lebih baris (like <tbody>)
initial	Set properti ini ke nilai default. Baca tentang awal
inherit	Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi

Rincian teknis

Nilai default:	Di barisan
Kembali Nilai:	Sebuah String, mewakili jenis tampilan elemen
CSS Versi	CSS1

Contoh lebih

Contoh

Perbedaan antara properti display dan properti visibility:

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

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

Cobalah sendiri "

Contoh

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;
}

Cobalah sendiri "