Belajar jQuery Part 10 : Cara Menambahkan CSS

Ditulis oleh Irvan Nurfazri

Halo salam jumpa kembali di pertemuan yang ke-9 di sesi belajar jQuery. Pada pertemuan ini saya akan mengulas tentang Cara Menambahkan CSS dengan jQuery.

Dalam sesi terakhir ini tentang belajar jQuery dasar, kita akan membahas secara singkat pengertian CSS dan bagaimana cara menambahkan CSS pada element HTML.

Fungsi CSS() dalam jQuery adalah fungsi untuk menambahkan atau membuat css pada element HTML. Cara penulisan fungsi css sangatlah mudah, sama seperti penulisan fungsi jQuery  yang sebelumnya sudah kita pelajari. Yang membedakan hanya pengisian parameter fungsi css.

Berikut contoh format penulisan fungsi CSS pada jQuery.

Pertama dibagian element HTML diisikan dengan element html yang ingin ditambahkan syntax CSS, sesuai dengan penandaan class dan id.

Id dipanggil dengan tanda pagar (#), dan class dipanggil dengan tanda tititk(.) kemudian tinggal tambahkan fungsi CSS seperti contoh diatas.

Baca: Tutorial Menambah dan Menghapus Class Dengan jQuery.

Masukan properti yang diinginkan, misalnya color, background, width, border dan lainnya. Lalu pada bagian value isikan value dari value yang kamu buat.


Cara Menambahkan CSS Dengan jQuery

Nah untuk contohnya saya sudah menulis kode programnya, silahkan tulis ulang di text editor teman – teman.

index.html

style.css

Hasilnya…

Cara Menambahkan CSS dengan jQuery - #IRVANGEN
Cara Menambahkan CSS dengan jQuery – #IRVANGEN

Kode program diatas berisikan sebuah lingkaran warna biru, dan pada tombol “Tambahkan CSS” diklik maka fungsi CSS jQuery dijalankan, yaitu menambahkan warna merah dan warna biru tersebut menjadi warna merah.

Jika diklik, maka hasilnya akan berubah seperti gambar dibawah ini.

Bagaimana cara menambahkan banyak CSS pada element html, atau ingin merubah ukuran lingkarannya? Baik perhatikan kembali kode program dibawah ini.

index.html

style.css

Hasil sebelum diklik.

Nah, teman – teman perhatikan kembali pada kode program bagian ini.

Tiap – tiap property dan value dipisahkan dengan tanda koma (,) jangan lupa tambahkan tanda kurung kurawal “{}” dibagian awal dan akhir.

Agar syntaxnya lebih jelas dan teratur bisa juga ditulis seperti ini.

Setelah diklik hasilnya seperti gambar dibawah ini.

Nah bagaimana mudah dipahami bukan?


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Cara Menambahkan CSS Dengan jQuery. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Tentang Penulis

Irvan Nurfazri

No one can bring you true happiness except Allah

Instagram : ig.com/irvan_gen

Tinggalkan Komentar