DOM: Class & Style

Dua Cara Mengubah Tampilan

Ada dua pendekatan mengubah tampilan dari JS: lewat class CSS (classList) atau langsung ke properti style (el.style). Keduanya sah, tapi dipakai untuk kebutuhan berbeda. Aturan umumnya: kalau perubahannya kompleks atau dipakai ulang, taruh di class CSS; kalau nilainya dihitung saat runtime (posisi drag, lebar progress bar), pakai style langsung.

classList: Cara yang Rapi

const box = document.getElementById("kotak");
box.classList.add("aktif");      // tambah class
box.classList.add("a", "b");     // bisa banyak sekaligus
box.classList.remove("aktif");   // hapus class
box.classList.toggle("aktif");   // ada -> hapus, tidak ada -> tambah
box.classList.contains("aktif"); // true/false, untuk pengecekan
box.classList.replace("lama", "baru"); // ganti class

toggle mengembalikan boolean status barunya, berguna untuk logika lanjutan. Contoh sederhana memakai playground modul ini (ada <p id="teks"> dan class .aktif di CSS):

const teks = document.getElementById("teks");
teks.classList.add("aktif");
console.log("Punya class aktif?", teks.classList.contains("aktif")); // true

Contoh realistis: dark mode satu baris plus menu buka/tutup.

// Dark mode: cukup toggle class di <body>, CSS yang urus sisanya
document.getElementById("btnTema").addEventListener("click", () => {
  const gelap = document.body.classList.toggle("dark");
  console.log(gelap ? "Mode gelap aktif" : "Mode terang aktif");
});

// Accordion FAQ: klik pertanyaan -> jawabannya mengembang
document.querySelectorAll(".faq-tanya").forEach(btn => {
  btn.addEventListener("click", () => {
    btn.parentElement.classList.toggle("buka");
  });
});

Dengan class, semua detail visual (warna, transisi, animasi) tetap di CSS tempatnya yang semestinya. JS hanya mengatur STATUS.

style Langsung: Untuk Nilai Dinamis

box.style.color = "red";
box.style.backgroundColor = "yellow"; // camelCase, bukan background-color!
box.style.fontSize = "24px";          // satuan wajib ditulis (kecuali 0)
box.style.display = "none";           // sembunyikan elemen

Properti CSS yang memakai strip berubah menjadi camelCase di JS: background-color jadi backgroundColor, font-size jadi fontSize. Contoh realistis: progress bar yang lebarnya dihitung dari data.

function setProgress(persen) {
  const bar = document.getElementById("bar");
  const aman = Math.min(Math.max(persen, 0), 100); // clamp 0-100
  bar.style.width = aman + "%";
  bar.textContent = aman + "%";
}
setProgress(73);

Nilai 73% tidak mungkin ditulis sebagai class statis untuk setiap kemungkinan persen, inilah wilayahnya style langsung.

Mana yang Dipilih?

Contoh gabungan yang realistis: validasi input dengan status visual.

const input = document.getElementById("nama");
input.addEventListener("input", () => {
  const valid = input.value.trim().length >= 3;
  input.classList.toggle("error", valid === false); // toggle dengan paksa!
  input.classList.toggle("ok", valid);
});

toggle punya parameter kedua opsional: toggle("error", kondisi) memaksa tambah jika kondisi true, hapus jika false. Sangat rapi untuk status validasi.

Jebakan Umum

• Mengatur el.style menimpa inline style dan menang atas class CSS (spesifisitas tinggi). Jangan heran kalau class tidak mempan setelah style diset langsung.
• Lupa satuan: box.style.width = 100 tidak jalan, harus "100px" atau "100%".
• Mengubah style tiap frame dari JS untuk animasi membuat layout thrashing. Ubah class sekali, biarkan CSS transition yang menganimasikan.
• classList tidak bisa dipakai untuk mengatur BANYAK class via string berspasi: add("a b") error, harus add("a", "b").

Ringkasan

Gunakan classList (add/remove/toggle/contains) untuk perubahan status dan tampilan kompleks, biarkan CSS yang bekerja. Gunakan el.style (camelCase!) hanya untuk nilai dinamis hasil perhitungan. Prinsipnya: JS mengatur STATUS dan ANGKA, CSS mengatur TAMPILAN.