Style Javascript Display None

Style Javascript Display None

3 min read Jun 18, 2024
Style Javascript Display None

Cara Mengatur Elemen JavaScript Menjadi display: none

Dalam pengembangan web, seringkali kita perlu menyembunyikan elemen HTML dari tampilan pengguna. Salah satu cara yang efektif untuk mencapai hal ini adalah dengan menggunakan properti CSS display: none. Artikel ini akan membahas cara mengendalikan tampilan elemen HTML menggunakan JavaScript dan properti display: none.

1. Mengubah Properti display dengan JavaScript

// Mengatur elemen dengan ID "myElement" menjadi `display: none`
document.getElementById("myElement").style.display = "none";

// Mengatur elemen dengan class "hiddenElement" menjadi `display: none`
document.querySelectorAll(".hiddenElement").forEach(element => {
  element.style.display = "none";
});

Kode di atas menunjukkan dua cara untuk mengubah properti display elemen HTML menggunakan JavaScript:

  • Mengakses elemen dengan ID: Gunakan document.getElementById() untuk mengambil elemen dengan ID tertentu dan ubah properti style.display menjadi none.
  • Mengakses elemen dengan class: Gunakan document.querySelectorAll() untuk mengambil semua elemen dengan class tertentu dan ubah properti style.display menjadi none untuk setiap elemen.

2. Mengatur display secara Dinamis

Kita juga bisa mengontrol tampilan elemen secara dinamis berdasarkan kondisi tertentu:

// Mengatur elemen menjadi `display: none` jika kondisi terpenuhi
if (condition) {
  document.getElementById("myElement").style.display = "none";
} else {
  document.getElementById("myElement").style.display = "block";
}

// Menampilkan/menyembunyikan elemen saat tombol diklik
const button = document.getElementById("myButton");
const element = document.getElementById("myElement");
button.addEventListener("click", () => {
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
});

Kode di atas menunjukkan contoh:

  • Kondisi: Elemen disembunyikan jika suatu kondisi terpenuhi.
  • Tombol: Elemen ditampilkan/disembunyikan ketika tombol diklik.

3. Penggunaan display: none

Properti display: none merupakan cara yang efektif untuk menyembunyikan elemen HTML karena:

  • Tidak menempati ruang: Elemen yang disembunyikan dengan display: none tidak lagi menempati ruang di tata letak halaman, sehingga tata letak halaman menjadi lebih efisien.
  • Tidak dapat diakses: Elemen yang disembunyikan dengan display: none tidak dapat diakses oleh pengguna, baik dengan mouse maupun keyboard.

Kesimpulan

Mengatur properti display: none dengan JavaScript merupakan cara yang mudah dan fleksibel untuk mengendalikan tampilan elemen HTML. Dengan menggunakan teknik ini, Anda dapat membuat halaman web yang lebih interaktif dan dinamis, dengan tampilan elemen yang dapat diatur berdasarkan kondisi tertentu atau interaksi pengguna.