Cara Mengubah Ukuran Font dengan jQuery

07/08/2018    Risman Hakim    120     Website

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 :)

jQuery, Javascript, HTML CSS, Bootstrap, website

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