Belajar jQuery Part 10 : Cara Menambahkan CSS


Belajar JQuery
Belajar JQuery

IRVAN GEN – Halo teman -teman salam jumpa kembali di pertemuan yang ke-9 di sesi belajar jQuery. Sebelumnya kita pernah membahas Tutorial Menambah dan Menghapus Class Dengan jQuery. Pada pertemuan yang ke-9 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.

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.

Belajar jQuery Part 10 : Cara Menambahkan CSS 1

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.

Belajar jQuery Part 10 : Cara Menambahkan CSS 2

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.

Belajar jQuery Part 10 : Cara Menambahkan CSS 3

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.

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

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