Metode CSS pada jQuery

07/11/2019    Risman Hakim    111     Website

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.

jQuery

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More