Setelah Anda bisa mengubah konten dan atribut, kemampuan berikutnya yang akan membuat website Anda terasa "hidup" adalah memanipulasi Style CSS. Dengan JavaScript, Anda bisa mengubah tampilan elemen secara real-time berdasarkan interaksi pengguna.
Ada dua cara utama untuk melakukannya: melalui properti .style dan properti .classList.
1. Properti style (Inline Styles)
Gunakan properti .style untuk mengubah gaya elemen secara langsung. Ini setara dengan menulis atribut style="..." di dalam tag HTML.
Aturan Penulisan (CamelCase)
Dalam CSS, kita menggunakan kebab-case (misal: background-color). Namun, di JavaScript, kita menggunakan camelCase (misal: backgroundColor).
const box = document.querySelector(".box"); // Mengubah warna latar belakang
box.style.backgroundColor = "blue"; // Mengubah ukuran dan margin
box.style.width = "200px";
box.style.marginTop = "50px"; // Memberikan border
box.style.border = "2px solid black";
Kapan digunakan? Saat Anda perlu nilai yang sangat dinamis (misal: posisi elemen yang mengikuti kursor atau nilai yang didapat dari input user).
2. Properti classList (Recommended)
Cara terbaik dan paling bersih untuk memanipulasi gaya adalah dengan menambah atau menghapus class CSS yang sudah didefinisikan di file .css Anda. Ini menjaga agar logika (JS) dan tampilan (CSS) tetap terpisah.
Metode Utama classList:
| Metode | Fungsi |
add("nama-class") |
Menambahkan class baru ke elemen. |
remove("nama-class") |
Menghapus class dari elemen. |
toggle("nama-class") |
Jika class ada, hapus. Jika tidak ada, tambahkan. |
contains("nama-class") |
Mengecek apakah elemen memiliki class tertentu (hasilnya true/false). |
Contoh Penggunaan:
const kartu = document.querySelector(".card");
const tombol = document.querySelector("#btn-mode"); tombol.addEventListener("click", () => { // Toggle class 'dark-mode' pada elemen kartu kartu.classList.toggle("dark-mode");
});
3. Mengetahui Gaya yang Sedang Berjalan (getComputedStyle)
Properti elemen.style hanya bisa mengambil gaya yang ditulis secara inline. Jika gaya berasal dari file CSS eksternal, Anda harus menggunakan window.getComputedStyle().
const h1 = document.querySelector("h1");
const gayaAsli = window.getComputedStyle(h1).color; console.log(gayaAsli); // Output: rgb(0, 0, 0)
Perbandingan: .style vs .classList
| Fitur | element.style | element.classList |
| Kemudahan | Langsung ubah properti satu per satu. | Sekali panggil bisa ubah banyak properti. |
| Kerapihan Kode | Kurang rapi (bercampur dengan HTML). | Sangat rapi (CSS tetap di file CSS). |
| Performa | Baik untuk perubahan kecil/spesifik. | Lebih baik untuk perubahan tema/tampilan besar. |
| Keamanan | Mudah ditimpa oleh gaya lain. | Lebih konsisten karena mengikuti hierarki CSS. |
Contoh Kasus: Notifikasi Melayang
const notif = document.querySelector(".notification"); function tampilkanNotif() { notif.style.opacity = "1"; notif.style.transform = "translateY(0)"; notif.classList.add("success-theme");
}
Kesimpulan:
Gunakan classList sebanyak mungkin agar kode Anda tetap terstruktur. Gunakan .style hanya jika Anda perlu perhitungan matematika yang kompleks untuk menentukan nilai properti CSS tersebut (seperti animasi yang bergantung pada posisi scroll).
