Add Class Display None Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

33

Share

Menambahkan Class "display: none" dengan JavaScript

Dalam pengembangan web, seringkali kita perlu mengontrol visibilitas elemen HTML secara dinamis. Salah satu cara untuk mencapai hal ini adalah dengan menambahkan class "display: none" ke elemen tersebut menggunakan JavaScript.

Cara Menambahkan Class "display: none"

Ada beberapa cara untuk menambahkan class "display: none" ke elemen HTML menggunakan JavaScript:

1. Menggunakan classList.add():

   const myElement = document.getElementById('myElement');
   myElement.classList.add('display-none');
   

   Kode ini akan menambahkan class display-none ke elemen dengan ID myElement. Anda harus memastikan bahwa class display-none sudah didefinisikan dalam CSS Anda dengan display: none.

2. Menggunakan setAttribute():

   const myElement = document.getElementById('myElement');
   myElement.setAttribute('class', 'display-none');
   

   Kode ini akan mengganti class yang ada pada elemen dengan display-none. Jika elemen sudah memiliki class lain, class tersebut akan dihapus.

3. Menggunakan DOM manipulation:

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

   Kode ini akan mengubah properti display dari elemen menjadi none. Metode ini lebih langsung, tetapi mungkin kurang disukai jika Anda ingin mengontrol visibilitas beberapa elemen dengan class yang sama.

Keuntungan Menggunakan Class "display: none"

• Kode lebih terstruktur: Memisahkan styling dari JavaScript membuatnya lebih mudah dibaca dan diubah.
• Lebih mudah diubah: Anda dapat dengan mudah mengubah gaya elemen dengan mengubah definisi class display-none di CSS.
• Dapat digunakan untuk beberapa elemen: Anda dapat menggunakan class yang sama untuk menyembunyikan beberapa elemen dengan mudah.

Contoh Penggunaan

Berikut adalah contoh sederhana bagaimana menambahkan class "display: none" ke elemen menggunakan JavaScript:

Ini adalah paragraf yang akan disembunyikan.

Sembunyikan Paragraf

Dalam contoh ini, ketika tombol "Sembunyikan Paragraf" diklik, fungsi hideParagraph() akan menambahkan class display-none ke elemen dengan ID myParagraph, sehingga paragraf tersebut akan disembunyikan.

Kesimpulan

Menambahkan class "display: none" dengan JavaScript adalah cara yang efektif untuk mengontrol visibilitas elemen HTML secara dinamis. Dengan memanfaatkan metode yang tepat, Anda dapat membuat kode lebih terstruktur, mudah diubah, dan dapat digunakan kembali.