Properti Display Style DOM HTML dan Fungsinya
Properti display Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai ke tipe display dari suatu elemen. Properti ini hampir sama fungsinya dengan properti visibility property, dimana properti tersebut juga dapat melakukan display atau hide suatu elemen namun dengan sedikit perbedaan dengan properti display adalah pada nilai propertinya, yaitu: none, berfungsi untuk menyembunyikan semua elemen, sedangkan properti visibility: makna hide berarti hanya menyembunyikan konten dari elemen yang dapat terlihat pada display, namun elemen tersebut tetap berada pada posisi dan ukuran aslinya.
Sintak:
Property Values:
Return Value: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan tipe display dari suatu elemen pada dokumen HTML.
Sebelum memahami lebih dalam materi tentang Properti Display Style DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Arah HTML Menggunakan Direction Style DOM, Properti Cursor Style DOM HTML dan Fungsinya, dan Mereset Penghitungan HTML Menggunakan counterReset Style DOM.
- Berfungsi untuk mengembalikan nilai properti: object.style.display
- Berfungsi untuk mengatur nilai properti: object.style.display = value;
Property Values:
- inline: Merupakan nilai default dari properti display, dimana value ini berfungsi untuk melakukan render elemen yang berfungsi sebagai elemen inline.
- block: Digunakan untuk melakukan render elemen sebagai sebuah elemen level blok.
- compact: Digunakan untuk melakukan render elemen sebagai sebuah level blok atau inline, bergandung pada konteks dari konten yang digunakan.
- flex: Digunakan untuk melakukan render elemen sebagai sebuah kotak fleksibel level blok.
- inline-block: Digunakan untuk melakukan render elemen sebagai sebuah kotak blok yang berada di dalam kotak inline.
- inline-flex: Digunakan untuk melakukan render elemen sebagai kotak fleksibel level inline.
- inline-table: Digunakan untuk melakukan render elemen sebagai nilai tabel inline.
- list-item: Digunakan untuk melakukan render elemen sebagai sebuah list.
- marker: Digunakan untuk mengatur konten sebelum atau setelah kotak berfungsi sebagai sebuah penanda.
- none: Digunakan untuk tidak menampilkan jenis elemen apapun.
- run-in: Digunakan untuk melakukan render elemen sebagai sebuah blok level atau inline, bergantung pada konteks yang digunakan.
- table: Digunakan untuk melakukan render elemen sebagai sebuah tabel blok, dengan sebuah baris pemisah sebelum dan setelah tabel ditampilkan.
- table-caption: Digunakan untuk melakukan render elemen sebagai sebuah table caption.
- table-cell: Digunakan untuk melakukan render elemen sebagai sebuah tabel sel.
- table-column: Digunakan untuk melakukan render elemen sebagai sebuah kolom dari sel.
- table-column-group: Digunakan untuk melakukan render elemen sebagai sebuah kelompok dari satu atau lebih kolom tabel.
- table-footer-group: Digunakan untuk melakukan render elemen sebagai sebuah baris footer tabel.
- table-header-group: Digunakan untuk melakukan render elemen sebagai sebuah header baris tabel.
- table-row: Digunakan untuk melakukan render elemen sebagai sebuah baris tabel.
- table-row-group: Digunakan untuk melakukan render elemen sebagai sebuah kelompok dari satu atau lebih baris tabel.
- initial: Digunakan untuk mengaturan properti display ke nilai default-nya.
- inherit: Digunakan untuk menerima nilai turunan properti display dari elemen parent.
Return Value: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan tipe display dari suatu elemen pada dokumen HTML.
Contoh: Mendeskripsikan nilai properti inline.
Contoh: Mendeskripsikan nilai properti none.
Contoh: Mendeskripsikan nilai properti table-caption.
Contoh: Mendeskripsikan nilai properti block.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style display DOM
</title>
</head>
<body>
<h2>
Properti Display DOM
</h2>
<p>
Klik tombol untuk mengatur
properti display
</p>
<div
id = "MKN1">
Blog Elfan
</div>
<button
onclick="myBons1s()">
Press
</button>
<!-- script untuk mengatur
nilai properti display -->
<script>
function myBons1s()
{
document.getElementById("MKN1").style.display
= "inline";
}
</script>
</body>
</html>
Output:Properti Display DOM
Klik tombol untuk mengatur properti display
Blog Elfan
Contoh: Mendeskripsikan nilai properti none.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style display DOM
</title>
</head>
<body>
<h2>
Properti Display DOM HTML
</h2>
<p>
Klik tombol untuk mengatur
properti display
</p>
<div id = "MKN2">
Blog Elfan
</div>
<button
onclick="myBon2s()">
Press
</button>
<!-- script untuk mengatur
nilai properti display -->
<script>
function myBon2s()
{
document.getElementById("MKN2").style.display
= "none";
}
</script>
</body>
</html>
Output:
Properti Display DOM HTML
Klik tombol untuk mengatur properti display
Blog Elfan
Contoh: Mendeskripsikan nilai properti table-caption.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style display DOM
</title>
</head>
<body>
<h2>
Properti Display DOM
</h2>
<p>
Klik tombol untuk mengatur
nilai properti display
</p>
<div
id = "MKN3">
Blog Elfan
</div>
<button
onclick="myBons3s()">
Press
</button>
<!-- script untuk mengatur
nilai properti display -->
<script>
function myBons3s()
{
document.getElementById("MKN3").style.display
= "table-caption";
}
</script>
</body>
</html>
Output:Properti Display DOM
Klik tombol untuk mengatur nilai properti display
Blog Elfan
Contoh: Mendeskripsikan nilai properti block.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style display DOM
</title>
</head>
<body>
<h2>
Properti Display DOM HTML
</h2>
<p>
Klik tombol untuk mengatur
nilai properti display
</p>
<div
id = "MKN4">
Blog Elfan
</div>
<button
onclick="myBon4s()">
Press
</button>
<!-- script untuk mengatur
nilai properti display -->
<script>
function myBon4s()
{
document.getElementById("MKN4").style.display
= "block";
}
</script>
</body>
</html>
Output:Properti Display DOM HTML
Klik tombol untuk mengatur nilai properti display
Blog Elfan
Properti Display Style dalam dokumen HTML adalah salah satu properti yang sangat penting dan sering digunakan dalam pengaturan tampilan elemen-elemen pada halaman web. Properti ini memungkinkan pengembang web untuk mengontrol bagaimana elemen-elemen dalam halaman web ditampilkan atau diposisikan. Dengan menggunakan properti ini, elemen dapat disusun dalam berbagai cara, baik secara vertikal maupun horizontal, sesuai dengan kebutuhan desain. Memahami bagaimana cara kerja dan fungsi dari properti display sangat krusial untuk menciptakan halaman web yang efisien dan terorganisir dengan baik.
Pada dasarnya, properti display berfungsi untuk menentukan jenis perilaku atau tampilan elemen. Properti ini memiliki banyak nilai yang dapat diterapkan, tergantung pada jenis elemen dan kebutuhan desain. Salah satu nilai paling umum yang digunakan adalah "block", yang membuat elemen bersifat blok dan memulai baris baru setelah elemen tersebut. Nilai lain yang sering digunakan adalah "inline", yang membuat elemen ditampilkan dalam satu baris dengan elemen lainnya, tanpa memulai baris baru. Terdapat juga nilai "none", yang menyembunyikan elemen dari tampilan halaman, meskipun elemen tersebut tetap ada dalam struktur dokumen HTML.
Selain itu, properti display juga menyediakan nilai seperti "flex" dan "grid" yang memungkinkan pengaturan elemen secara lebih fleksibel. Nilai-nilai ini digunakan dalam desain tata letak modern dan memungkinkan pengembang web untuk membuat elemen-elemen dalam halaman web disusun dengan cara yang lebih dinamis dan responsif. Ketika nilai "flex" digunakan, elemen-elemen dalam kontainer fleksibel dapat disusun baik secara horizontal maupun vertikal, tergantung pada pengaturan yang diterapkan. Sementara itu, nilai "grid" memungkinkan pembuatan tata letak berbasis kolom dan baris yang lebih kompleks, memberikan kebebasan lebih dalam mengatur posisi elemen.
Baca Juga:
Secara umum, penggunaan properti display sangat memengaruhi bagaimana elemen-elemen dalam halaman web ditampilkan dan berinteraksi satu sama lain. Dengan memanfaatkan berbagai nilai dari properti ini, pengembang dapat mengatur elemen-elemen untuk berperilaku sesuai dengan tujuan desain, baik itu untuk menciptakan tampilan yang sederhana atau tampilan yang kompleks dengan banyak kolom dan baris. Properti ini memungkinkan pengaturan ruang dan urutan elemen dengan cara yang sangat fleksibel, yang sangat penting dalam pembuatan desain halaman web responsif yang dapat menyesuaikan diri dengan berbagai ukuran layar perangkat.
Pada desain halaman web yang lebih kompleks, properti display sangat berguna untuk mengatur tata letak elemen-elemen konten, seperti gambar, teks, dan elemen interaktif lainnya. Dengan nilai "block", elemen-elemen seperti paragraf atau div akan tampil sebagai blok yang memakan seluruh lebar area yang tersedia dan membiarkan elemen berikutnya muncul pada baris baru. Hal ini sangat berguna ketika ingin menampilkan konten dalam format vertikal yang terstruktur, seperti daftar atau artikel panjang. Sebaliknya, nilai "inline" sering digunakan untuk elemen yang ingin ditampilkan dalam satu baris dengan elemen lainnya, seperti tautan atau gambar dalam paragraf teks.
Properti display juga berfungsi dalam pengaturan kontainer elemen. Misalnya, dengan menggunakan nilai "flex" pada elemen induk, elemen-elemen anak yang ada di dalamnya akan diatur dengan cara fleksibel, memungkinkan elemen-elemen tersebut untuk menyesuaikan diri dengan ruang yang tersedia. Hal ini sangat berguna ketika desain halaman web perlu menyesuaikan ukuran atau posisi elemen-elemen berdasarkan ukuran layar perangkat yang digunakan, baik itu perangkat seluler, tablet, atau desktop. Dengan pengaturan ini, elemen-elemen dapat diposisikan secara otomatis, baik secara vertikal maupun horizontal, mengikuti alur desain yang ditentukan.
Selain itu, properti display juga memiliki peran penting dalam desain responsif. Desain responsif adalah pendekatan pengembangan web yang bertujuan untuk menciptakan halaman web yang dapat menyesuaikan diri dengan berbagai ukuran layar perangkat. Dalam hal ini, properti display memungkinkan pengembang untuk mengatur tampilan elemen-elemen sesuai dengan ukuran layar yang berbeda. Sebagai contoh, dengan menggunakan nilai "grid" atau "flex", pengembang dapat membuat elemen-elemen halaman secara otomatis menyesuaikan lebar atau posisi, tanpa perlu mengubah kode secara manual untuk setiap ukuran layar.
Salah satu aspek penting dalam pengaturan tata letak dengan properti display adalah bagaimana elemen-elemen tersebut berinteraksi satu sama lain dalam satu konteks halaman. Dengan menggunakan nilai "flex", misalnya, elemen-elemen dalam kontainer dapat diberi aturan yang memungkinkan untuk mengubah ukuran secara dinamis, memberikan pengalaman pengguna yang lebih baik. Hal ini sangat bermanfaat dalam pembuatan antarmuka pengguna yang interaktif, seperti menu navigasi atau tampilan produk, yang dapat menyesuaikan diri dengan berbagai perangkat yang digunakan.
Penggunaan properti display tidak hanya terbatas pada pengaturan tata letak konten dalam halaman web, tetapi juga penting dalam mengontrol tampilan elemen-elemen interaktif, seperti tombol atau formulir input. Dalam desain web modern, elemen-elemen interaktif sering kali memanfaatkan pengaturan layout berbasis flex atau grid untuk menciptakan pengalaman pengguna yang lebih responsif dan menyenangkan. Sebagai contoh, elemen tombol atau formulir input dapat diatur dalam baris atau kolom, tergantung pada preferensi desain, dengan menggunakan pengaturan yang lebih fleksibel dan adaptif.
Sebagai tambahan, properti display dapat digunakan dalam konteks manipulasi elemen-elemen yang tampaknya tidak perlu ditampilkan pada halaman web, tetapi tetap ada dalam struktur dokumen HTML. Nilai "none" digunakan dalam hal ini untuk menyembunyikan elemen-elemen tersebut. Elemen-elemen yang disembunyikan dengan nilai ini tidak akan tampil pada halaman web, namun masih dapat diakses melalui JavaScript atau metode pengendalian lainnya. Penggunaan nilai ini sering kali digunakan untuk elemen-elemen yang perlu disembunyikan sementara, seperti menu tersembunyi atau elemen-elemen interaktif yang muncul hanya ketika dibutuhkan.
Secara keseluruhan, properti display adalah alat yang sangat berguna dalam pengembangan halaman web, memberikan kontrol yang sangat besar terhadap bagaimana elemen-elemen halaman ditampilkan dan diatur. Dengan memahami cara kerja dan nilai-nilai yang dapat diterapkan pada properti ini, pengembang web dapat menciptakan desain yang lebih fleksibel dan dinamis, yang dapat menyesuaikan diri dengan berbagai perangkat dan ukuran layar. Properti ini berperan penting dalam menciptakan tampilan yang tidak hanya estetis, tetapi juga fungsional dan responsif terhadap kebutuhan pengguna.
Melanjutkan pembahasan tentang properti display, penting untuk mencatat bagaimana pengaruhnya dalam pemrograman halaman web yang lebih kompleks, terutama dalam pengaturan elemen-elemen yang bersifat interaktif atau dinamis. Salah satu contohnya adalah penggunaan nilai "flex" dan "grid" dalam menciptakan tata letak halaman yang bisa beradaptasi dengan ukuran layar perangkat pengguna. Dengan nilai-nilai ini, elemen-elemen dalam halaman dapat disusun secara lebih fleksibel dan responsif. Hal ini sangat penting untuk menciptakan pengalaman pengguna yang optimal, mengingat banyaknya perangkat dengan ukuran layar yang beragam.
Pada desain halaman web yang memanfaatkan prinsip tata letak berbasis fleksibilitas, penggunaan properti display dengan nilai "flex" memungkinkan pengaturan elemen-elemen dalam baris atau kolom yang dapat menyesuaikan diri dengan ukuran kontainer. Hal ini memungkinkan konten untuk lebih mudah mengikuti perubahan lebar atau tinggi halaman tanpa perlu membuat kode khusus untuk berbagai ukuran layar. Dengan kata lain, elemen-elemen dalam kontainer fleksibel akan memanfaatkan ruang yang tersedia secara lebih efisien, sehingga halaman web tetap terlihat rapi dan terstruktur dengan baik, meskipun tampil pada perangkat dengan ukuran layar yang berbeda.
Salah satu manfaat lain dari penggunaan nilai "flex" adalah kemampuannya untuk membuat elemen-elemen yang lebih kecil atau lebih besar secara otomatis menyesuaikan diri dengan kontainer induknya. Hal ini sangat berguna ketika elemen-elemen tersebut memiliki ukuran yang bervariasi atau ketika tata letak halaman web membutuhkan elemen-elemen yang dapat mengisi ruang dengan cara yang lebih terkontrol. Pengaturan seperti ini memudahkan pengembang dalam membuat elemen-elemen yang responsif tanpa harus mengubah struktur atau tata letak secara manual.
Selain itu, properti display juga berfungsi untuk menyederhanakan proses pengaturan tata letak dalam desain halaman yang lebih kompleks. Nilai "grid" memungkinkan pembuatan tata letak berbasis kolom dan baris yang lebih terorganisir. Dengan menggunakan grid, pengembang dapat dengan mudah menyusun elemen-elemen dalam format tabel atau kisi, yang sangat berguna ketika membuat desain yang membutuhkan penataan elemen secara presisi. Nilai "grid" memberikan lebih banyak kebebasan dalam menentukan ukuran kolom dan baris, memungkinkan pengaturan elemen-elemen secara lebih terperinci dan lebih mudah dikendalikan.
Selain pengaturan tata letak, properti display juga digunakan dalam elemen-elemen yang tidak perlu selalu terlihat dalam tampilan antarmuka. Sebagai contoh, elemen yang disembunyikan dengan nilai "none" bisa berguna dalam situasi tertentu, seperti saat elemen perlu ditampilkan berdasarkan interaksi pengguna atau ketika elemen tersebut hanya diperlukan dalam keadaan tertentu. Dengan menggunakan nilai "none", elemen-elemen ini tidak akan tampak pada halaman web, meskipun tetap ada dalam struktur HTML. Pendekatan ini berguna ketika elemen-elemen tersebut hanya ingin diaktifkan atau ditampilkan melalui pengendalian dinamis, seperti saat tombol ditekan atau ketika pengguna berinteraksi dengan elemen lainnya.
Ketika nilai display diatur ke "none", elemen-elemen tersebut tidak hanya tersembunyi, tetapi juga tidak mempengaruhi tata letak halaman secara keseluruhan. Artinya, elemen-elemen tersebut tidak akan mengambil ruang dalam tampilan halaman, sehingga ruang yang sebelumnya digunakan oleh elemen yang tersembunyi akan diambil oleh elemen-elemen lain yang tetap terlihat. Hal ini sangat bermanfaat dalam desain antarmuka pengguna yang lebih interaktif, dimana elemen-elemen seperti menu tersembunyi atau pop-up dapat ditampilkan atau disembunyikan berdasarkan kebutuhan pengguna.
Penggunaan properti display juga tidak terbatas pada elemen-elemen yang bersifat statis atau tidak berubah. Dalam desain antarmuka yang lebih dinamis, elemen-elemen seperti tombol atau panel interaktif dapat diatur menggunakan display untuk membuat tampilan elemen-elemen tersebut berubah berdasarkan interaksi pengguna. Misalnya, dalam pengaturan menu dropdown, elemen-elemen menu tersebut dapat disembunyikan dengan nilai "none" dan hanya ditampilkan ketika pengguna mengklik tombol atau melakukan aksi lainnya. Hal ini membuat halaman web lebih interaktif dan memungkinkan elemen-elemen antarmuka disesuaikan dengan tindakan pengguna.
Selain itu, ketika menggunakan nilai "flex", elemen-elemen dalam kontainer fleksibel dapat diberikan aturan yang lebih rinci untuk mengatur ukuran, urutan, dan ruang antar elemen. Properti ini memungkinkan pengaturan tata letak yang sangat terperinci, mengoptimalkan ruang yang tersedia dan memastikan bahwa elemen-elemen dalam halaman web saling berinteraksi dengan cara yang lebih terstruktur. Misalnya, dalam desain antarmuka, pengaturan ruang antar elemen bisa dilakukan dengan lebih akurat, memastikan bahwa elemen-elemen seperti tombol, gambar, dan teks memiliki jarak yang cukup tanpa mengorbankan estetika desain halaman.
Dalam halaman web yang lebih dinamis, properti display juga memungkinkan penggunaan elemen-elemen yang berubah tampilan berdasarkan status atau kondisi tertentu. Sebagai contoh, dalam aplikasi web yang melibatkan banyak elemen dinamis, properti display digunakan untuk menampilkan atau menyembunyikan elemen-elemen sesuai dengan aksi pengguna, seperti memilih item dalam daftar atau berinteraksi dengan berbagai bagian halaman. Hal ini memungkinkan pengalaman pengguna yang lebih interaktif, dimana elemen-elemen hanya muncul ketika diperlukan, membantu pengguna fokus pada konten yang relevan dan menghindari kebingungan.
Sebagai kesimpulan, properti display dalam HTML adalah salah satu komponen penting dalam pembuatan halaman web yang efisien dan responsif. Dengan memahami bagaimana properti ini bekerja dan bagaimana nilai-nilai yang tersedia mempengaruhi tampilan dan pengaturan elemen, pengembang dapat menciptakan halaman web yang lebih dinamis, terorganisir, dan mudah disesuaikan dengan berbagai ukuran layar perangkat. Penggunaan yang tepat dari properti display akan memberikan kontrol yang lebih besar terhadap desain halaman dan interaksi elemen-elemen di dalamnya, menciptakan pengalaman pengguna yang lebih baik dan lebih memuaskan.
Referensi Tambahan:
- 6 Value Properti flexDirection Style DOM pada HTML
- 4 Contoh Properti flexFlow Style DOM pada HTML
- 3 Value Properti flexGrow Style DOM pada HTML
- 3 Value Properti flexShrink Style DOM pada HTML
- 5 Value Properti flexWrap Style DOM pada HTML
- 5 Value Properti cssFloat Style DOM pada HTML
- 6 Value Properti Font Style DOM pada HTML
Artikel ini akan dibaca oleh: Ria Kusuma, Rio Budi Hendrawan, Risa Devi Anjaini, Riska Setiani, dan Risma Nur Mazida.
6 komentar untuk "Properti Display Style DOM HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti display Styla DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti display Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti Display Style DOM pada HTML?
BalasHapusProperti Display Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan tipe tampilan dari suatu elemen pada dokumen HTML.
HapusElemen dalam HTML sebagian besar merupakan elemen "inline" atau "block". Elemen sebaris ini memiliki konten float yang terdapat pada bagian sisi kiri dan sisi kanan elemen. Dengan adanya kedua elemen float tersebut, maka elemen block dapat berfungsi untuk mengisi keseluruhan nilai barisnya, dan tidak ada yang bisa ditampilkan pada sisi kiri dan sisi kanan elemen.
HapusProperti Display memungkinkan pengembang untuk menampilkan atau menyembunyikan elemen float tersebut. Dimana fungsi dari properti display ini hampir milip seperti properti visibility. Namun, pada properti Display jika pengembang mengaturnya dengan value none, maka properti tersebut akan menyembunyikan keseluruhan elemen, sedangkan pada properti visibiliy, jika nilai propertinya diatur ke tipe hidden, maka nilai yanga kan disembunyikana adalah konten elemennya saja, tetapi elemen tersebut tetapi berada pada posisi dan ukuran yang seharusnya.
Jika sebuah elemen adalah elemen tipe block, maka tipe displaynya juga dapat diubah menjadi properti float.
Hapus