Belajar JQuery Part 12 : Menambahkan CSS Dengan JQuery

Belajar JQuery Menambahkan CSS Dengan JQuery

Pada tutorial sebelumnya di www.malasngoding.com sudah di jelaskan tentang pengertian dan cara-cara penggunaan effect pada jquery, event jquery, menambahkan element, manipulasi class, menghapus element dengan jquery dan banyak lagi yang telah di pelajari tentang JQuery dasar. tetapi masih ada lagi fungsi jQuery yang tidak kalah bagus dan bergunanya, yaitu fungsi CSS(). sehingga pada tutorial belajar jquery menambahkan css dengan jquery ini akan di bahas tentang pengertian dari fungsi CSS() tersebut dan bagaimana cara menggunakan fungsi CSS tersebut untuk menambahkan css pada element HTML.

fungsi CSS() pada jquery adalah fungsi yang di sediakan untuk menambahkan atau membuat css pada element HTML. contohnya misalnya anda bisa menambahkan atau menyisipkan design css dengan menggunakan fungsi css() milik jquery ini. dan cara penulisan fungsi css pada jquery ini sangatlah mudah, caranya sama seperti penulisan fungsi jquery yang lain, yang membedakannya hanya pada pengisian parameter fungsi css. berikut ini format penulisan fungsi css pada jquery.’

pertama pada bagian element HTML di isikan dengan element html yang ingin di tambahkan syntax css. sesuai dengan penandaan id dan classnya. jika id di panggil dengan tanda pagar (#), dan class di panggil dengan tanda titik (.). kemudian tambahkan fungsi css seperti contoh di atas, dan masukkan property yang di inginkan misalnya background, color, border, width atau apa saja, kemudian pada bagian valuenya isikan value dari property yang anda buat. silahkan perhatikan contoh belajar jquery menambahkan css dengan jquery.

index.html

style.css

dapat di lihat pada contoh di atas bahwa terdapat lingkaran berwarna orange, dan pada saat tombol di klik kita menginginkan lingkaran tersebut berubah menjadi warna biru. untuk menambahkan css pada element lingkaran tersebut

hasilnya pada tombol di klik maka element lingkaran akan berubah warna menjadi biru seperti yang sudah kita setting pada fungsi css jquery di atas.

belajar jquery menambahkan css dengan jquery

See the Pen pgeJEK by Malas Ngoding (@malasngoding) on CodePen.0

Dan bagaimana cara menambahkan banyak css pada element html? perhatikan contoh berikut ini.

Cara menambahkan banyak css pada element HTML

index.html

style.css

perhatikan pada penulisan cara menambah banyak css dengan fungsi css() jquery.

per property dan value pisahkan dengan tanda koma(,). dan jangan lupa untuk menambahkan tanda kurung kurawal “{” pada awal dan tanda kurung kurawal penutup pada akhir “}”. karena ini berarti array. dan agar syntax css nya lebih rapi di lihat bisa mengubah penulisannya sebagai berikut.

See the Pen Qypbvm by Malas Ngoding (@malasngoding) on CodePen.0

Sekianlah tutorial belajar jQuery menambahkan css dengan JQuery.