Tutorial Belajar jQuery Part 15: Cara Mengubah Lebar dan Tinggi HTML dengan jQuery

Posted on

Panduan belajar jQuery Duniailkom kali ini akan membahas cara mengubah lebar dan tinggi elemen HTML secara dinamis dengan jQuery. Kita akan mempelajari 2 method jQuery: width() dan height().


Mengubah Lebar dan Tinggi Unsur HTML dengan jQuery

Lebar dan Tinggi sebuah unsur HTML yaitu diantara aspek yang sering diubah ketika mendesain animasi, misalkan ketika sebuah tombol di-klik, panjang box akan bertambah atau berkurang.

Dengan jQuery, kita dapat menggunakan method width() dan height() untuk mengatur perubahan ini. Bila kedua method ini dipanggil tanpa argumen, berarti kita ingin mengambil nilai yang terdapat ketika ini. Namun kalau diisi dengan sebuah argumen, berarti kita ingin men-set lebar dan tinggi element tersebut.

Selaku contoh, misalkan saya mempunyai tag HTML berikut:

Via CSS, box tersebut saya set dengan property berikut:

Artinya, ketika halaman diproses pertama-tama kali, box akan ditampilkan dengan lebar 300 pixel dan tinggi 80 pixel.

Ketika saya menjalankan kode jQuery ini:

Variabel lebar_box akan berisi angka 300. Angka ini tak lain yaitu lebar dari box tersebut. Nilai 300 ini dihitung menurut pixel, yakni 300 pixel.

Semacam itu pun dengan method height(). Ketika saya menjalankan kode berikut:

Variabel tinggi_box akan berisi nilai 80, sesuai dengan property CSS.

Tetapi bagaimana dengan kode ini?

Ini artinya, saya ingin men-set tinggi box menjadi 100 pixel, terlepas dari berapapun tinggi box ketika ini.

Agar lebih gampang dimengerti, mari masuk kepada contoh kasus. Di contoh berikut saya akan menggabungkan pemakaian method width() dan height() jQuery:

Disini saya mempunyai 4 tombol: Kurangi Lebar, Kurangi Tinggi, Tambah Lebar dan Tambah Tinggi. Sesuai dengan nama tombol ini, ketika di klik akan mengubah lebar dan tinggi box pink yang berada di bawahnya. Silahkan rekan rekan coba sebentar dari link codepen di bawah ini:

See the Pen Cara Mengubah Lebar dan Tinggi HTML dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Untuk memperoleh efek seperti ini, saya mengambil nilai lebar atau tinggi box ketika ini, lalu ditambah atau dikurang sebanyak 10 pixel.

Mari kita bahas apa yang terjadi ketika tombol Kurangi Lebar di klik. Ketika di-klik, kode jQuery berikut akan dijalankan:

Di baris pertama-tama, saya mengambil lebar box ketika ini dan menyimpannya ke di variabel lebar_box. Di baris kedua, nilai lebar_box ini saya kurangi 10 dan menjadi argumen ke di method width(). Dengan demikian, setiap kode diatas dijalankan, lebar box akan terus berkurang sebanyak 10 pixel.

Untuk tombol lain: Kurangi Tinggi, Tambah Lebar dan Tambah Tinggi, konsepnya sama saja. Saya yakin rekan rekan telah dapat mengartikan sendiri kode-kode jQuery tersebut.

Selaku latihan tambahan, bisakah rekan rekan mendesain 1 lagi tombol: “Kotak”. Ketika tombol ini di-klik, box seketika menjadi bujur sangkar dengan lebar dan tinggi 50 pixel.

Silahkan buka teks editor dan mulai berkreasi 🙂

Di panduan belajar jQuery kali ini kita telah membahas cara memanipulasi lebar dan tinggi element HTML menggunakan jQuery. Berikutnya saya akan membahas sebuah konsep yang lumayan membingungkan bagi pemula jQuery, yakni arti dari perintah $(this) dalam jQuery.


Sumber https://www.duniailkom.com/