Mengubah Class Elemen

Mengubah teks cukup untuk memperbarui informasi, tetapi banyak interaksi menuntut perubahan penampilan: panel menu terbuka, tombol berwarna saat aktif, seluruh halaman berganti tema. Perubahan tersebut tidak dikerjakan JavaScript satu per satu: JavaScript hanya mengganti label class pada elemen, lalu CSS yang telah kita tulis menentukan wujud setiap label. Pada chapter ini kita mempelajari properti classList beserta empat metodenya, memahami mengapa class lebih baik daripada style langsung, dan membangun pola tema gelap-terang yang menjadi bekal banyak komponen UI.

Properti classList #

Setiap elemen memiliki properti classList, sebuah objek yang mewakili daftar class milik elemen tersebut. Objek ini menyediakan empat metode utama:

Contoh pemakaiannya pada satu elemen tombol:

const tombol = document.getElementById("tombol-kirim");
tombol.classList.add("aktif");        // tombol kini punya class aktif
tombol.classList.contains("aktif");   // true
tombol.classList.remove("aktif");     // class aktif dilepas
tombol.classList.toggle("aktif");     // ditambah lagi, karena belum ada

Keunggulan praktisnya dibanding mengedit teks atribut class secara manual: class yang telah ada tidak tertimpa, dan beberapa class dapat ditambah sekaligus lewat classList.add("gelap", "teks-besar").

Mengapa Class, Bukan Style Langsung #

JavaScript juga menyediakan properti element.style untuk menulis deklarasi CSS langsung dari script. Kemampuan itu bekerja, tetapi membuatnya kebiasaan buruk: gaya tercecer di dua tempat — sebagian di file CSS, sebagian di script — dan aturan pada file CSS sulit menandinginya. Memilih class menghindari persoalan tersebut:

• Seluruh aturan tampilan tetap tinggal di satu tempat, yaitu file CSS.
• Satu class dapat dipakai banyak elemen sekaligus, tanpa mengulang kode.
• Keadaan tampilan terbaca sebagai label bermakna seperti .gelap atau .aktif, bukan kumpulan deklarasi CSS yang berserakan.

Pembagian tugasnya jelas: JavaScript menentukan elemen mana yang berada dalam keadaan tertentu, CSS menentukan tampilannya. Pola ini meneruskan prinsip separation of concerns yang kita pegang sejak section HTML dan CSS.

Pola Tema Gelap dan Terang #

Pola paling terkenal dari strategi class adalah pilihan tema. Langkahnya berurutan dan selalu sama:

1. Tulis gaya dasar tema terang pada elemen body di CSS.
2. Tambahkan aturan body.gelap yang mengganti warna latar dan teks.
3. Dari JavaScript, cukup panggil document.body.classList.toggle("gelap").

Setelah pola ini terpasang, keadaan tema tersimpan sebagai ada atau tidaknya class gelap pada body — tidak perlu variabel tambahan. Metode contains berguna untuk membaca keadaan itu, misalnya ketika label tombol harus mengikuti tema yang sedang aktif.

Contoh Lengkap: Tombol Toggle Tema #

Contoh berikut menggabungkan CSS dan JavaScript dalam satu file agar pasangan keduanya terlihat utuh: aturan .gelap di bagian style, reaksi klik di akhir body. Pemakaian addEventListener di sini masih berupa pola tetap; chapter Event Click akan membedahnya secara penuh.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle Tema Gelap Terang</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #ffffff;
      color: #1f2937;
    }

    body.gelap {
      background-color: #111827;
      color: #f9fafb;
    }

    .tombol-tema {
      padding: 8px 16px;
      border: 2px solid currentcolor;
      background: transparent;
      color: inherit;
      font-size: 1rem;
    }

    .tombol-tema.aktif {
      background-color: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <h1>Preferensi Tampilan</h1>
  <p>Tekan tombol untuk berganti tema gelap dan terang.</p>
  <button id="tombol-tema" type="button" class="tombol-tema">Mode Gelap</button>
  <script>
    const tombol = document.getElementById("tombol-tema");
    tombol.addEventListener("click", function () {
      document.body.classList.toggle("gelap");
      tombol.classList.toggle("aktif");
      if (document.body.classList.contains("gelap")) {
        tombol.textContent = "Mode Terang";
      } else {
        tombol.textContent = "Mode Gelap";
      }
    });
  </script>
</body>
</html>

Output yang Dihasilkan:

Saat halaman dibuka:
  - Latar putih, teks gelap, tombol polos berlabel "Mode Gelap"
Saat tombol ditekan:
  - Latar berubah gelap dan teks berubah terang
  - Tombol berlatar biru dan berlabel "Mode Terang"
Saat tombol ditekan lagi:
  - Tampilan kembali persis seperti semula

Mari kita telaah peran setiap baris penting di atas:

1. Aturan CSS body: gaya dasar tema terang — latar putih dan teks gelap untuk seluruh halaman.
2. Aturan CSS body.gelap: keadaan tema gelap yang hanya berlaku bila body membawa class gelap; tanpa script, aturan ini tidak pernah aktif.
3. Aturan CSS .tombol-tema dan .tombol-tema.aktif: dua wajah tombol, biasa dan aktif; perhatikan bahwa selector class bertingkat inilah yang dinyalakan oleh script.
4. Baris HTML <button ...>: tombol dengan id untuk pemilihan dan class awal tombol-tema.
5. Baris 39-40 JS (getElementById dan addEventListener): script memilih tombol lalu memasang reaksi klik yang isinya baru berjalan saat tombol ditekan.
6. Baris 41 JS (document.body.classList.toggle("gelap")): satu panggilan ini yang mengganti tema seluruh halaman, karena CSS yang mengerjakan sisanya.
7. Baris 42 JS (tombol.classList.toggle("aktif")): tombol juga berubah penampilan dengan pola class yang sama.
8. Baris 43-47 JS (contains dan textContent): contains membaca keadaan tema terkini, lalu label tombol disesuaikan agar pengunjung tahu tema berikutnya.

Perhatikan bahwa script di atas tidak memuat satu pun warna atau ukuran; seluruh keputusan visual milik CSS. Hingga chapter ini addEventListener kita pakai sebagai pola tetap, dan pola itu mencakup banyak kebutuhan. Chapter Event Click membongkarnya lebih dalam: jenis event yang tersedia, informasi yang dibawa objek event, serta pemasangan reaksi pada banyak elemen sekaligus.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Element: classList
• MDN Web Docs — EventTarget: addEventListener()

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle Tema Gelap Terang</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #ffffff;
      color: #1f2937;
    }

    body.gelap {
      background-color: #111827;
      color: #f9fafb;
    }

    .tombol-tema {
      padding: 8px 16px;
      border: 2px solid currentcolor;
      background: transparent;
      color: inherit;
      font-size: 1rem;
    }

    .tombol-tema.aktif {
      background-color: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <h1>Preferensi Tampilan</h1>
  <p>Tekan tombol untuk berganti tema gelap dan terang.</p>
  <button id="tombol-tema" type="button" class="tombol-tema">Mode Gelap</button>
  <script>
    const tombol = document.getElementById("tombol-tema");
    tombol.addEventListener("click", function () {
      document.body.classList.toggle("gelap");
      tombol.classList.toggle("aktif");
      if (document.body.classList.contains("gelap")) {
        tombol.textContent = "Mode Terang";
      } else {
        tombol.textContent = "Mode Gelap";
      }
    });
  </script>
</body>
</html>