Mengubah tampilan langsung lewat CSS dipakai untuk efek dinamis, misalnya mengubah warna berdasarkan status. Artikel ini membahas cara mengubah style CSS dengan jQuery.
Mengambil dan Mengubah
<script>
$("#kotak").css("color"); // ambil warna teks
$("#kotak").css("color", "red"); // ubah warna
</script>
Beberapa Properti Sekaligus
<script>
$("#kotak").css({
"background-color": "yellow",
"padding": "20px",
"border-radius": "8px"
});
</script>
Contoh Kasus: Bar Progres Dinamis
<script>
function setProgres(persen) {
$("#bar").css("width", persen + "%");
$("#bar").css("background", persen < 50 ? "orange" : "green");
}
setProgres(75);
</script>
Catatan Praktik Terbaik
Untuk perubahan tampilan yang kompleks atau berulang, menambah/menghapus kelas CSS dengan addClass() lebih rapi daripada banyak .css(), karena memisahkan gaya dari logika.
Kesimpulan
Gunakan .css() untuk membaca atau mengubah style, dan berikan objek untuk beberapa properti sekaligus. Untuk perubahan kompleks, pertimbangkan mengelola kelas CSS agar kode lebih bersih.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

