Tutorial Belajar jQuery Part 13: Cara Menambahkan Kode CSS Dinamis dengan jQuery

Posted on

Di lanjutan panduan belajar jQuery di Source Code Program kali ini saya akan membahas cara menambahkan kode CSS dinamis dengan jQuery. Method yang akan kita gunakan yaitu css().


Mengambil Nilai Property CSS Dengan jQuery

Kemampuan memanipulasi kode CSS secara dinamis setelah halaman tampil membuka banyak kemungkinan. Kita dapat mendesain beragam interaksi menarik, hal ini hanya dapat dibangun menggunakan JavaScript. Dan dengan jQuery membuatnya menjadi amat gampang.

jQuery menyediakan method css() yang dapat digunakan untuk mengambil dan mengubah property CSS untuk sebuah faktor HTML. Sama seperti method jQuery lain, method css() dapat ditulis dengan 1 atau 2 argumen. Bila ditulis dengan 1 argumen, artinya kita ingin mengambil nilai property CSS faktor tersebut.

Selaku contoh, bila saya ingin mengetahui apa warna background dari sebuah faktor HTML dengan id=”box”, saya dapat menulisnya dengan:

Kini, variabel nilai akan berisi kode warna RGB seperti rgb(255, 192, 203). Mari kita seketika praktek dengan kode program berikut:

Di halaman ini saya mempunyai sebuah kotak yang dibangun dari tag <div id=”box”></div>. Kotak ini diwarnai dengan CSS via selector #box. Saya mengatur lebar (width), tinggi (height), warna background (backround-color), serta efek garis tepi (border) dari CSS. Inilah yang nantinya akan kita ambil menggunakan jQuery.

Ketika tombol Ambil Property CSS diklik, kode program berikut akan dijalankan:

Disini saya menggunakan method css() untuk mengambil nilai property CSS dari $(“#box”). Property yang akan diambil yaitu width, height dan background-color. Hasilnya kemudian disimpan ke di variabel nilai1, nilai2 dan nilai3. Di baris terakhir seluruh nilai ini saya tampilkan dengan menggunakan method html() ke di tag <p id=”tekape”>.

Yang mesti perlu diperhatikan, nilai argumen dari method css() yaitu property CSS. Bila kita salah tulis atau property tersebut tak di-set dari CSS, hasilnya akan kosong.

Silahkan sobat praktek dari link codepen dibawah ini:

See the Pen Cara Mengambil Nilai Property CSS Dengan Method css() jQuery by duniailkom (@duniailkom) on CodePen.10206


Mengubah Nilai Property CSS Dengan jQuery

Method css() jQuery pun dapat digunakan untuk mengubah nilai property CSS. Misalkan dengan men-klik sebuah tombol, kita dapat mengubah warna background atau ukuran dari sebuah faktor HTML.

Bila saya ingin mengubah tinggi sebuah faktor HTML dengan id=”box” menjadi 120 pixel, saya dapat menggunakan kode berikut:

Berikut prakteknya:

See the Pen Cara Mengubah Nilai Property CSS Dengan Method css() jQuery by duniailkom (@duniailkom) on CodePen.10206

Disini, saya mempunyai box yang sama dengan sebelumnya. Akan tetapi, ketika tombol Change! Di-klik, yang akan dijalankan yaitu kode program berikut:

Ketika baris kode program jQuery ini artinya, saya akan mengg
anti property CSS untuk element id=”box” agar mempunyai nilai:

Karena nilai-nilai ini berbeda dari kode CSS awal box, akan tampak perubahan drastis. Box akan membesar dan berwarna kuning.

Silahkan sobat berkreasi dengan method css() jQuery ini. Misalnya menambahkan tombol ketiga yang dapat mengecilkan box dan warnanya berubah menjadi biru (blue).

Di panduan belajar jQuery berikutnya, saya masih membahas seputar cara memanipulasi CSS dari jQuery. Namun saya tak akan mengubah property CSS satu persatu, tapi seketika mengubah class CSS. Berikutnya: cara mengubah class CSS elemen HTML dengan jQuery.


Sumber https://www.duniailkom.com/