Properti tampilan gaya
Contoh
Setel elemen <div> agar tidak ditampilkan:
document.getElementById("myDIV").style.display = "none";
Definisi dan Penggunaan
Properti tampilan mengatur atau mengembalikan tipe tampilan elemen.
Elemen dalam HTML sebagian besar adalah elemen "sebaris" atau "blok": Elemen sebaris memiliki konten mengambang di sisi kiri dan kanannya. Elemen blok mengisi seluruh baris, dan tidak ada yang bisa ditampilkan di sisi kiri atau kanannya.
Properti tampilan juga memungkinkan penulis untuk menampilkan atau menyembunyikan elemen. Ini mirip dengan properti visibilitas . Namun, jika Anda mengatur display:none, itu menyembunyikan seluruh elemen, sementara visibility:hiddenitu berarti bahwa isi elemen tidak akan terlihat, tetapi elemen tetap pada posisi dan ukuran aslinya.
Tip: Jika sebuah elemen adalah elemen blok, tipe tampilannya juga dapat diubah dengan properti float.
Dukungan Peramban
| Property | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Kembalikan properti tampilan:
object.style.display
Setel properti tampilan:
object.style.display = value
Nilai properti
| 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 |
Detail Teknis
| Nilai Bawaan: | Di barisan |
|---|---|
| Nilai Kembali: | Sebuah String, mewakili tipe tampilan dari sebuah elemen |
| Versi CSS | CSS1 |
Lebih Banyak Contoh
Contoh
Perbedaan antara properti tampilan dan properti visibilitas:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Contoh
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';
}
}
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;
}
Contoh
Kembalikan tipe tampilan elemen <p>:
alert(document.getElementById("myP").style.display);
Halaman Terkait
Tutorial CSS: Tampilan dan visibilitas CSS
Referensi CSS: properti tampilan
Objek Gaya