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>
| Metode | Termasuk |
|---|---|
| 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).

