Memahami perbedaan antara ukuran murni (width), ukuran + padding (innerWidth), dan ukuran + padding + border (outerWidth).
jQuery Dimensions
Contoh Kode jQuery jQuery Dimensions:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body style="font-family: sans-serif; padding: 20px;">
<div id="kotakDimensi" style="width:200px; padding:15px; border:5px solid #0d2e5c; background:#e0f2fe;">
Kotak Dimensi
</div>
<button id="btnUkur" style="margin-top:10px;">Ukur Lebar Elemen</button>
<script>
$('#btnUkur').click(function() {
alert("Lebar Konten murni: " + $('#kotakDimensi').width() + "px
" +
"Lebar Total (outerWidth): " + $('#kotakDimensi').outerWidth() + "px");
});
</script>
</body>
</html>
Uji interaksi jQuery di atas dan amati animasi efek DOM secara langsung.