Vanilla Javascript Change Display None

Vanilla Javascript Change Display None

2 min read Jun 18, 2024
Vanilla Javascript Change Display None

Vanilla JavaScript: Mengubah Display ke "none"

Dalam pengembangan web, seringkali kita perlu menyembunyikan elemen HTML dari tampilan pengguna. Vanilla JavaScript, tanpa bantuan pustaka eksternal, menyediakan cara yang sederhana untuk mengontrol visibilitas elemen dengan mengubah properti display menjadi none.

Cara Kerja

Properti display dalam CSS mengontrol bagaimana sebuah elemen ditampilkan. Menyetelnya ke none secara efektif akan menghilangkan elemen dari aliran layout halaman, membuatnya tidak terlihat oleh pengguna.

Contoh Implementasi

Berikut adalah contoh sederhana bagaimana mengubah display menjadi none menggunakan JavaScript:




  Vanilla JavaScript: Mengubah Display



  

Ini adalah paragraf yang akan dihilangkan.

Dalam contoh ini:

  1. Elemen HTML: Sebuah paragraf dengan ID "myParagraph" dan sebuah tombol dengan fungsi hideParagraph() didefinisikan.
  2. Fungsi JavaScript: hideParagraph() mengambil elemen paragraf menggunakan document.getElementById(). Kemudian, properti style.display dari elemen tersebut diubah menjadi none.

Menampilkan Kembali Elemen

Untuk menampilkan kembali elemen yang disembunyikan, Anda dapat mengubah properti display kembali ke nilai defaultnya, seperti block atau inline, tergantung pada jenis elemennya.

Contoh:

paragraph.style.display = "block"; // Untuk menampilkan kembali paragraf

Kesimpulan

Menggunakan Vanilla JavaScript, Anda dapat dengan mudah mengontrol visibilitas elemen HTML dengan mengubah properti display menjadi none. Ini adalah metode yang efektif dan sederhana untuk menyembunyikan konten yang tidak diperlukan dari pengguna.

Related Post