Cara Mengubah Ukuran Font dengan jQuery

Cara Mengubah Ukuran Font dengan jQuery - Pada pertemuan kali ini saya ingin memberikan tutorial sederhana buat kalian yang ingin memanipulasi ataupun mengubah suatu elemen dengan memanfaatkan library dari jQuery. Nah, tutorial yang akan kita buat kali ini adalah Cara Mengubah Ukuran Font dengan jQuery, untuk lebih jelasnya akan saya praktekan cara mengubah ukuran font berikut ini.

Langkah 1 : Cara Mengubah Ukuran Font dengan jQuery

Untuk langkah pertama, kita harus menentukan elemen yang akan dimanipulasi ukurannya dalam hal ini kita akan gunakan teks dan dua buah tombol button sebagai event untuk mengubah ukuran teksnya. Untuk itu silahkan kalian buat layout nya seperti berikut, pada kasus ini saya menggunakan framework bootstrap untuk layout nya.

<body>
    <div class="container">
        <div class="row mt-3">
            <div class="col-md-5">
                <h2 class="p-3 bg-info text-white">[ <span class=" text-warning">Javascript</span> ]</h2>
                <button class="btn btn-danger" id="upText">+</button>
                <button class="btn btn-warning" id="downText">-</button>
            </div>
        </div>
    </div>
</body>

Langkah 2 : Cara Mengubah Ukuran Font dengan jQuery

Setelah membuat layout seperti diatas, langkah selanjutnya kita akan membuat fungsi dari kedua tombol button agar event nya bisa berjalan, untuk itu kalian bisa ketikan sintak dari jQuery berikut untuk membuat event dari masing - masing tombol button diatas yakni menambah ukuran teks dan mengurangi ukuran teksnya.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script>
    $(document).ready(function() {
        $( "#upText" ).on( "click", function() {
            $( "h2" ).css( "font-size", "+=2" );
        });
        
        $( "#downText" ).on( "click", function() {
            $( "h2" ).css( "font-size", "-=2" );
        });
    });
</script>

Setelah sintak diatas telah kalian ketikan semua, langkah selanjutnya silahkan simpan filenya kemudian buka pada browser masing- masing dan lihat hasilnya. jika kalian klik salah satu tombol button maka akan terjadi perubahan ukuran pada teks sesuai tombol yang diklik.

Cara Mengubah Ukuran Font dengan jQuery

Baik, cukup sekian tutorial sederhana jQuery mengenai bagaimana Cara Mengubah Ukuran Font dengan jQuery, semoga tutorial ini bisa bermanfaat dan bisa menambah referensi dalam memanipulasi suatu elemen, sampai jumpa lagi pada tutorial selanjutnya dan selamat mencoba :)

7 Agustus 2018

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat