Setattribute Javascript Display None

Setattribute Javascript Display None

4 min read Jun 18, 2024
Setattribute Javascript Display None

Mengatur Elemen HTML dengan setAttribute dan display: none

JavaScript memiliki banyak cara untuk memanipulasi elemen HTML, dan salah satunya adalah dengan menggunakan metode setAttribute. Metode ini memungkinkan kita untuk mengatur atribut elemen HTML, termasuk atribut style. Kita bisa memanfaatkannya untuk menyembunyikan atau menampilkan elemen dengan mengatur nilai display menjadi none atau block.

Cara Menggunakan setAttribute untuk Mengatur display: none

Berikut contoh cara menggunakan setAttribute untuk mengatur display: none pada sebuah elemen HTML:

// Mendapatkan elemen yang ingin diubah
const myElement = document.getElementById("myElement");

// Mengatur atribut style dengan nilai display: none
myElement.setAttribute("style", "display: none;");

// Sekarang elemen myElement akan disembunyikan dari tampilan

Dalam kode di atas, kita pertama-tama mengambil elemen HTML dengan id myElement menggunakan document.getElementById. Kemudian, kita menggunakan metode setAttribute untuk mengatur atribut style elemen tersebut menjadi "display: none;". Dengan begitu, elemen myElement akan disembunyikan dari tampilan.

Keuntungan Menggunakan setAttribute

Menggunakan setAttribute untuk mengatur display: none memiliki beberapa keuntungan:

  • Fleksibel: Kita bisa menggunakan setAttribute untuk mengatur berbagai atribut elemen HTML, termasuk style. Ini memberikan fleksibilitas yang lebih besar dalam memanipulasi elemen.
  • Mudah dipahami: Kode setAttribute relatif mudah dipahami dan ditulis, bahkan bagi pemula dalam JavaScript.

Contoh Penggunaan

Berikut contoh sederhana penggunaan setAttribute untuk menyembunyikan elemen HTML:




    
    
    Contoh setAttribute


    
    

Teks yang akan disembunyikan

Dalam contoh ini, kita memiliki tombol dengan id tombol dan paragraf dengan id teks. Saat tombol diklik, fungsi addEventListener akan menjalankan kode yang mengatur atribut style dari paragraf menjadi "display: none;". Akibatnya, paragraf dengan id teks akan disembunyikan.

Kesimpulan

setAttribute adalah metode yang berguna untuk memanipulasi elemen HTML dalam JavaScript. Dengan menggunakannya, kita dapat dengan mudah mengatur atribut elemen, termasuk style, untuk mengubah tampilan dan perilaku elemen di halaman web.

Selain display: none, kita juga bisa menggunakan setAttribute untuk mengatur berbagai atribut lain, seperti class, id, dan src.

Semoga artikel ini bermanfaat!