DOM: classList dan style

Ubah CSS dari JavaScript: kelas, inline style, custom property.

Pahami konsepnya

Dua cara mengubah tampilan dari JavaScript. Pertama: element.style.properti = nilai — inline style pada elemen itu. style.backgroundColor, style.fontSize, style.display. Nama properti CSS berubah dari kebab-case ke camelCase (background-color → backgroundColor).

Kedua (lebih baik): element.classList.add("kelas"), .remove, .toggle (hidup-mati), .contains (periksa). Menambah/menghapus kelas CSS lebih terstruktur — gaya didefinisikan di CSS, JavaScript hanya mengaktifkan/menonaktifkan.

CSS custom property: element.style.setProperty("--warna", "teal") mengubah variabel CSS dari JS — sangat berguna untuk tema dan animasi. getComputedStyle(el) membaca gaya final setelah CSS diterapkan.

Coba contoh kode

<!doctype html>
<html>
<head>
  <style>
    .highlight { background: yellow; font-weight: bold; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <p id="teks">Halo dunia</p>
  <script>
    const p = document.getElementById("teks");

    // inline style
    p.style.color = "blue";
    p.style.fontSize = "1.2em";

    // classList
    p.classList.add("highlight");
    console.log(p.classList.contains("highlight"));  // true

    // toggle: hidup-mati
    p.classList.toggle("highlight");
    console.log(p.classList.contains("highlight"));  // false
  </script>
</body>
</html>

style.color mengubah warna teks langsung. classList.add("highlight") menambah kelas CSS yang mendefinisikan background kuning. toggle membalik keadaan — tambah bila belum ada, hapus bila sudah.

Latihan singkat

Uji: fungsi toggle(el, kelas) — panggil 2x, hasil kedua harus `false` (toggle off).