Jago JavaScript 2 #4: Bermain Warna & Class (Styling via JS)

Ada dua cara utama buat ngerubah tampilan elemen: lewat properti .style (langsung ganti di elemennya) atau lewat .classList (tambah/hapus kategori desain dari CSS).

🧩 Apa yang Akan Dipelajari

• Menggunakan properti .style untuk perubahan cepat.
• Memahami kenapa .classList lebih disukai dibanding .style.
• Cara nambah, hapus, dan tukar (toggle) Class CSS.
• Simulasi sederhana fitur Dark Mode.

⚙️ Persiapan

Siapkan file HTML dan CSS sederhana ini:

HTML:

<div id="kotak" class="box">Kotak Ajaib</div>
<button id="btn-warna">Ganti Warna</button>
<button id="btn-mode">Dark Mode</button>

CSS:

.box { width: 200px; height: 100px; background: lightgray; transition: 0.3s; }
.biru { background: dodgerblue; color: white; border-radius: 20px; }
.dark-mode { background: #222; color: #fff; }

🚀 Langkah-Langkah

1. Manipulasi Style Langsung (.style)

Ini cara paling instan. Kamu langsung akses properti CSS-nya. Ingat, gunakan camelCase ya!

const kotak = document.getElementById('kotak');

// Ganti warna teks dan ukuran font
kotak.style.color = "red";
kotak.style.fontSize = "24px";
kotak.style.marginTop = "20px"; // Gantinya 'margin-top'

2. Menambah & Menghapus Class (add & remove)

Daripada nulis satu-satu di JS, mending kita panggil Class yang sudah ada di CSS. Ini jauh lebih rapi.

const kotak = document.getElementById('kotak');

// Nambahin class 'biru' dari CSS
kotak.classList.add('biru');

// Ngapus class 'biru'
// kotak.classList.remove('biru');

3. Saklar Ajaib: toggle

Ini adalah method paling sakti di classList. Cara kerjanya: kalau Class-nya belum ada, dia bakal nambahin. Kalau Class-nya sudah ada, dia bakal ngapus. Pas banget buat tombol ON/OFF!

const btnMode = document.getElementById('btn-mode');

btnMode.addEventListener('click', () => {
    // Body bakal ganti-ganti antara mode biasa dan dark-mode
    document.body.classList.toggle('dark-mode');
});

4. Mengecek Class (contains)

Kadang kita perlu ngecek, "Eh, elemen ini lagi pakai class 'biru' gak sih?".

if (kotak.classList.contains('biru')) {
    console.log("Kotaknya lagi biru nih!");
}

💡 Tips Tambahan

• Separation of Concerns: Selalu usahakan pakai classList daripada .style. Biar urusan desain tetap di file CSS, dan JavaScript cuma bertugas sebagai "pengatur lalu lintas"-nya saja.
• Transition: Kalau kamu pakai classList, kamu bisa dapet efek transisi halus dari CSS (transition: 0.5s), sedangkan kalau pakai .style langsung, biasanya perubahannya kaku (patah-patah).
• Multiple Classes: Kamu bisa nambahin banyak class sekaligus: el.classList.add('class1', 'class2').

❗ Troubleshooting

Masalah: Kenapa classList.add('biru') gak ngerubah warna kotaknya? Solusi: Cek di file CSS kamu. Pastikan selector .biru punya prioritas yang cukup atau tidak tertimpa oleh ID selector (#kotak). Ingat, di CSS, ID lebih kuat daripada Class!

🎯 Kesimpulan

Bermain dengan tampilan di JavaScript itu seru banget! Kamu bisa pilih mau ganti gaya secara kasar pakai .style atau secara elegan pakai .classList. Dengan teknik toggle, kamu sudah bisa bikin fitur keren seperti sidebar yang bisa sembunyi atau tema gelap-terang.