jQuery dan CSS

trik jquery

SeniKoding.com - JQuery dan CSS tidak dapat dipisahkan satu sama lain. Keduanya merupakan pasangan yang serasi ketika digunakan bersamaan untuk memanipulasi desain web menjadi lebih rapi, indah dan keren pastinya :).

Belajar JQuery dan CSS


Dalam bekerja sama, jQuery dan CSS menciptakan desain web yang powerful, jQuery memiliki kemampuan untuk mengambil dan memanipulasi nilai properti pada CSS. Cara mengambil nilai properti pada CSS adalah dengan menggunakan perintah CSS().

  • Mengambil Nilai Properti CSS dengan JQuery

Contoh implementasi CSS dengan JQuery adalah sebagai berikut:
$('body').css('background')
Script diatas digunakan 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 seperti 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 kode diatas ditulis lengkap maka manipulasi properti CSS dengan JQuery akan seperti 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.SeniKoding.com
    </body>
</html>

Hasil browser:

belajar jquery

Background yang awalnya "putih" defaultnya dari browser, sekarang menjadi "hitam" karena sudah dirumah oleh properti CSS didalam jQuery.

Semoga mudah dimengerti artikel jQuery dan CSS, silakan dilanjut Cara Manipulasi Tag HTML dengan jQuery.

Tulisan yang simpel ini semoga bermanfaat :).
Kunjungi web resminya jquery di www.jquery[dot]com.

- salam -

Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "jQuery dan CSS"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -