Set Div Style Display None Javascript

Set Div Style Display None Javascript

3 min read Jun 18, 2024
Set Div Style Display None Javascript

Mengatur Keterlihatan Elemen dengan display: none dalam JavaScript

Dalam pengembangan web, seringkali kita perlu mengontrol keterlihatan elemen HTML. JavaScript memberikan kita fleksibilitas untuk melakukan hal ini, dan salah satu cara yang umum adalah dengan menggunakan properti CSS display: none. Artikel ini akan membahas bagaimana mengatur display: none pada elemen div menggunakan JavaScript.

Dasar-dasar display: none

Properti display: none dalam CSS digunakan untuk menyembunyikan elemen HTML. Elemen yang memiliki display: none tidak akan ditampilkan di halaman web.

Cara Mengatur display: none dengan JavaScript

Berikut beberapa cara umum untuk mengatur display: none pada elemen div dengan JavaScript:

1. Mengatur style.display secara Langsung:

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

Kode di atas mengambil elemen div dengan id "myDiv" dan kemudian mengatur properti style.display menjadi "none".

2. Menggunakan Class:




const myDiv = document.getElementById("myDiv");
myDiv.classList.add("hidden");

Kode ini menggunakan class "hidden" yang didefinisikan dalam CSS untuk mengatur display: none. JavaScript kemudian menambahkan class "hidden" ke elemen div dengan id "myDiv".

3. Mengubah Class dengan classList.toggle:

const myDiv = document.getElementById("myDiv");
myDiv.classList.toggle("hidden");

Kode ini akan menambahkan class "hidden" jika elemen div tidak memiliki class "hidden" dan akan menghapus class "hidden" jika elemen div sudah memiliki class "hidden". Ini sangat berguna untuk toggling keterlihatan elemen.

4. Menggunakan getElementsByClassName:

const myDivs = document.getElementsByClassName("myDivClass");
for (let i = 0; i < myDivs.length; i++) {
  myDivs[i].style.display = "none";
}

Kode ini akan mengambil semua elemen div dengan class "myDivClass" dan mengatur display: none untuk setiap elemen tersebut.

Tips Tambahan

  • Anda dapat menggunakan display: block untuk menampilkan kembali elemen yang telah disembunyikan.
  • Anda dapat menggunakan display: inline atau display: inline-block untuk menampilkan elemen tetapi tidak membuat baris baru.

Kesimpulan

Menggunakan display: none dengan JavaScript memberikan kontrol yang kuat terhadap keterlihatan elemen HTML. Anda dapat memilih metode yang paling sesuai dengan kebutuhan Anda, baik dengan mengatur style.display secara langsung, menggunakan class, atau dengan classList.toggle.