Vanilla Javascript Display None

Vanilla Javascript Display None

3 min read Jun 18, 2024
Vanilla Javascript Display None

Memahami dan Menggunakan display: none dalam Vanilla JavaScript

display: none adalah sebuah properti CSS yang memungkinkan kita untuk menyembunyikan elemen HTML dari tampilan halaman web. Properti ini memiliki efek yang kuat, karena elemen yang disembunyikan dengan display: none tidak akan memakan ruang di layout halaman.

Cara Menggunakan display: none dengan JavaScript

Untuk menyembunyikan elemen dengan JavaScript, kita perlu menggunakan properti style dari elemen tersebut dan mengubah nilai display-nya menjadi none. Berikut adalah contoh:

const myElement = document.getElementById("myElement");
myElement.style.display = "none";

Dalam contoh di atas, kita pertama-tama mendapatkan referensi ke elemen dengan ID myElement menggunakan document.getElementById(). Kemudian, kita mengakses properti style dari elemen tersebut dan menetapkan display menjadi none.

Menampilkan Elemen Kembali

Untuk menampilkan kembali elemen yang telah disembunyikan, kita dapat mengubah nilai display menjadi block atau inline (tergantung pada jenis elemennya).

myElement.style.display = "block"; // Untuk elemen blok
myElement.style.display = "inline"; // Untuk elemen inline

Contoh Penggunaan display: none

Berikut adalah beberapa contoh cara menggunakan display: none dalam praktik:

  • Membuat Menu Toogle: Kita dapat menggunakan display: none untuk menyembunyikan menu dropdown, lalu menampilkannya ketika pengguna mengklik tombol.
  • Menampilkan/Menyembunyikan Elemen Berdasarkan Kondisi: Kita dapat menggunakan display: none untuk menampilkan atau menyembunyikan elemen tertentu berdasarkan kondisi, seperti input form atau pesan error.
  • Membuat Animasi Transisi: Kita dapat menggunakan display: none bersama dengan animasi CSS untuk membuat transisi yang halus ketika menampilkan atau menyembunyikan elemen.

Alternatif untuk display: none

Terkadang, display: none bukanlah solusi terbaik. Misalnya, jika kita hanya ingin menyembunyikan elemen dari tampilan tetapi tetap ingin elemen tersebut memakan ruang di layout halaman, kita dapat menggunakan properti visibility: hidden.

Kesimpulan

display: none merupakan properti CSS yang powerful untuk menyembunyikan elemen HTML dari tampilan halaman. Dengan memahami cara menggunakannya, kita dapat membuat halaman web yang interaktif dan dinamis.

Related Post