Kamu sudah bisa mengubah teks dan atribut lewat DOM. Sekarang koneksi keempat: JavaScript ke CSS. Ada dua jalan.

Cara 1: element.style

const kotak = document.querySelector(".kotak");
kotak.style.backgroundColor = "crimson";
kotak.style.fontSize = "20px";
kotak.style.display = "none";

Nama properti CSS yang memakai tanda hubung ditulis camelCase: background-color jadi backgroundColor, font-size jadi fontSize. Nilainya string lengkap dengan satuan: "20px", bukan 20.

Yang sebenarnya terjadi: JavaScript menulis inline style ke elemen. Kalau kamu buka DevTools tab Elements, elemen itu sekarang punya atribut style="background-color: crimson; font-size: 20px; display: none;". Ingat urutan prioritas dari bab HTML ke CSS: inline mengalahkan aturan di file CSS. Jadi gaya ini sulit ditimpa nanti.

Satu jebakan lagi: el.style hanya membaca inline style, bukan gaya akhir. Kalau warna datang dari file CSS, el.style.color bernilai string kosong. Untuk membaca gaya akhir yang benar-benar dipakai, gunakan getComputedStyle(el).color.

Cara 2: classList

/* style.css */
.kotak { background: #eeeeee; transition: background 0.3s; }
.kotak.aktif { background: crimson; color: white; }
.sembunyi { display: none; }

// script.js
kotak.classList.add("aktif");        // pasang class
kotak.classList.remove("sembunyi");  // lepas class
kotak.classList.toggle("aktif");     // pasang kalau belum ada, lepas kalau sudah
kotak.classList.contains("aktif");   // true atau false

Saat aktif terpasang, kotak berubah dari abu-abu jadi merah dengan teks putih, dan perubahannya halus selama 0,3 detik karena transition. Saat class dilepas, kotak kembali abu-abu.

Kenapa classList lebih baik

Dengan classList, keputusan "seperti apa tampilan aktif" tetap tinggal di CSS. JavaScript cukup memutuskan kapan class itu dipasang. Ini separation of concerns dari bab pertama, diterapkan ke interaksi. element.style tetap berguna untuk nilai yang benar-benar dihitung saat itu, misalnya posisi elemen yang mengikuti kursor.

Kadang yang mau kamu simpan bukan sekadar "aktif atau tidak", tapi nilai seperti "terbuka", "memuat", atau "habis". Atribut data-* cocok untuk ini, dan CSS bisa membacanya lewat selector atribut.

<div class="pesanan" data-status="memuat">Pesanan #12</div>

.pesanan[data-status="memuat"] { color: gray; }
.pesanan[data-status="selesai"] { color: green; font-weight: 700; }

const pesanan = document.querySelector(".pesanan");
pesanan.dataset.status = "selesai";

Setelah baris JS itu jalan, atribut HTML-nya berubah jadi data-status="selesai", dan teks otomatis hijau tebal. JavaScript tidak menyentuh warna sama sekali. Ingat aturan penamaannya: data-user-id di HTML dibaca dataset.userId di JS, dan nilainya selalu string. dataset.suka = true akan tersimpan sebagai "true".

CSS variables (custom properties) adalah variabel yang didefinisikan di CSS dan bisa dipakai berulang:

:root { --aksen: #e34f26; }
.tombol { background: var(--aksen); }
.judul { color: var(--aksen); }

Semua tombol dan judul memakai warna oranye dari --aksen. Sekarang JavaScript cukup mengganti satu nilai, dan semua yang memakainya ikut berubah:

document.documentElement.style.setProperty("--aksen", "#1572b6");

document.documentElement adalah elemen <html>, tempat yang sama dengan :root. Setelah baris ini, tombol dan judul berubah jadi biru. Untuk custom property kamu wajib memakai setProperty, karena style.--aksen bukan sintaks JavaScript yang valid. Membacanya kembali bisa dengan getComputedStyle(document.documentElement).getPropertyValue("--aksen").

Teknik ini sering dipakai untuk fitur pilih warna tema, ukuran huruf yang bisa diatur pengguna, atau mode gelap.

Semua yang kita bahas baru berguna kalau ada pemicunya. Itulah event. Alurnya lima langkah:

1. Pengguna beraksi, misalnya mengklik tombol (HTML).
2. Browser membuat event click untuk tombol itu.
3. Fungsi handler JavaScript yang terdaftar dijalankan.
4. Handler mengubah DOM: teks, atribut, atau class.
5. Browser menerapkan aturan CSS yang sekarang cocok, dan tampilan berubah.

Contoh lengkapnya:

<h1 class="judul">Halo</h1>
<button class="tombol">Tekan aku</button>

.judul.aktif { color: crimson; }

const judul = document.querySelector(".judul");
const tombol = document.querySelector(".tombol");

tombol.addEventListener("click", (event) => {
  judul.textContent = "Tombol ditekan!"; // ubah HTML
  judul.classList.toggle("aktif");       // ubah CSS lewat class
  console.log(event.type, event.target); // "click", <button>
});

Klik pertama: judul berganti teks dan jadi merah. Klik kedua: teks tetap, tapi warna kembali normal karena toggle melepas class.

Beberapa hal tentang addEventListener:

• Argumen kedua adalah fungsi, bukan hasil pemanggilan fungsi. Tulis addEventListener("click", ubah), bukan addEventListener("click", ubah()). Versi kedua langsung menjalankan ubah sekali saat halaman dimuat.
• Handler menerima event object. Isinya antara lain event.type (nama event), event.target (elemen yang memicu), event.key (tombol keyboard, di event keydown), dan method event.preventDefault() untuk membatalkan aksi bawaan, misalnya formulir yang memuat ulang halaman saat submit.
• Event yang sering dipakai: click, input (isi kolom berubah), submit, keydown, scroll, dan DOMContentLoaded.

• Menulis banyak el.style.xxx padahal cukup satu class. Gaya jadi tersebar di JS dan sulit ditimpa.
• Lupa satuan: el.style.width = 200 tidak berefek. Tulis "200px".
• Menulis classList.add(".aktif"). Nama class ditulis tanpa titik. Titik hanya dipakai di selector.
• Membaca warna dari el.style.color lalu dapat string kosong. Pakai getComputedStyle.
• Memanggil handler saat mendaftarkannya: addEventListener("click", ubah()).
• Mengira dataset menyimpan boolean atau angka. Semua nilainya string, jadi bandingkan dengan === "true".