Cara Mengambil Lebar dan Tinggi Elemen dengan jQuery

Mengetahui ukuran elemen berguna untuk perhitungan tata letak responsif atau posisi. Artikel ini membahas cara mengambil lebar dan tinggi elemen dengan jQuery.

Metode .width() dan .height()

<script>
$("#kotak").width();  // lebar konten (px)
$("#kotak").height(); // tinggi konten (px)
</script>

Termasuk Padding dan Border

<script>
$("#kotak").innerWidth(); // + padding
$("#kotak").outerWidth(); // + padding + border
$("#kotak").outerWidth(true); // + margin juga
</script>
MetodeTermasuk
width()Konten saja
innerWidth()+ padding
outerWidth()+ padding + border

Contoh Kasus: Menyesuaikan Ukuran Elemen

<script>
const lebarLayar = $(window).width();
if (lebarLayar < 768) {
    $("#sidebar").hide(); // sembunyikan di layar kecil
}
</script>

Kesimpulan

Gunakan .width()/.height() untuk ukuran konten, atau versi inner/outer untuk menyertakan padding dan border. $(window).width() berguna untuk logika responsif.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *