Jquery Dan Css
- JQuery dan CSS tidak sanggup dipisahkan satu sama lain. Keduanya merupakan pasangan yang harmonis dikala dipakai bersamaan untuk memanipulasi desain web menjadi lebih rapi, indah dan keren pastinya :).
Belajar JQuery dan CSS
Dalam bekerja sama, jQuery dan CSS membuat desain web yang powerful, jQuery mempunyai kemampuan untuk mengambil dan memanipulasi nilai properti pada CSS. Cara mengambil nilai properti pada CSS ialah dengan memakai perintah CSS().
- Mengambil Nilai Properti CSS dengan JQuery
Contoh implementasi CSS dengan JQuery ialah sebagai berikut:
$('body').css('background')Script diatas dipakai untuk mengambil nilai CSS background dari tag <body> yang ditentukan dengan script CSS. Untuk mengubah nilai CSS, maka nama properti dan nilainya dipisahkan dengan tanda koma menyerupai berikut:
- Mengganti Nilai Properti CSS dengan JQuery
$('body').css('background', 'red')Script diatas akan mengubah background dari tag <body> menjadi Merah. Jika properti yang diubah lebih dari satu properti, maka properti yang satu dan yang lainnya dipisahkan dengan tanda koma, sedangkan setiap properti dan nilainya dipisahkan dengantanda titik dua (:).
Contohnya:
$('body').css({'background':'red' , 'color':'blue'})Script diatas akan mengubah background tag <body> menjadi Merah dan warna teks yang ditulis didalamnya menjadi warna Biru.
Jika arahan diatas ditulis lengkap maka manipulasi properti CSS dengan JQuery akan menyerupai ini:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('body').css({'background':'black' , 'color':'white'}); }); </script> </head> <body> Belajar JQUERY bersama www. </body> </html> Hasil browser:
Background yang awalnya "putih" defaultnya dari browser, kini menjadi "hitam" alasannya ialah sudah dirumah oleh properti CSS didalam jQuery.
Semoga gampang dimengerti artikel jQuery dan CSS, silakan dilanjut Cara Manipulasi Tag HTML dengan jQuery.
Tulisan yang praktis ini biar bermanfaat :).
Kunjungi web resminya jquery di www.jquery[dot]com.
- salam -