Metode CSS pada jQuery

Metode CSS pada jQuery - Di tutorial sebelumnya telah dibahas metode - metode dari jQuery next(), nextAll() dan nextUntil(), pada kesempatan kali ini saya akan membahas metode lainnya dari jQuery yaitu metode CSS. Metode CSS pada jQuery merupakan metode yang bisa kita gunakan untuk melakukan style terhadap elemen HTML. Ada 2 cara untuk untuk menuliskan metode CSS, yaitu penulisan single CSS dan multiple CSS.

1. Single CSS

$("selector").css('property', 'value');

2. Multiple CSS

$("selector").css({
    property1: 'value1',
    property2: 'value2'
});

Dari cara penulisan kode CSS jQuery diatas artinya kita bisa menyesuaikan kode - kode yang dibutuhkan saja, jika hanya butuh satu properti untuk penulisan CSS bisa dengan single CSS atau bisa dengan penulisan multiple CSS jika penggunaan properti lebih dari satu kali. Selanjutnya saya akan contohkan penggunaan metode CSS pada suatu elemen.

Silahkan kalian bisa membuat file index.html kemudian ketikan baris program HTML dan jQuery berikut.

<body>
    <h1>DUMETSchool.</h1>
    <button id="btn">Animate</button>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#btn").click(function(event) {
            $("h1").css({
                fontSize: '56px',
                color: 'darkcyan',
                background: '#cccccc',
                transition: '3s'
            });
        });
    });
</script>

Jika sudah, silahkan bisa kalian buka hasilnya pada browser masing - masing. Itulah diatas metode CSS jQuery dan cara penggunaannya, semoga dengan contoh diatas kalian bisa lebih faham bagaimana cara penggunaan metode CSS. Cukup sekian pembahasan tentang Metode CSS pada jQuery kali ini semoga bermanfaat.

7 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat