Cara Mengubah Style CSS dengan jQuery

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).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *