檢索 HTML 元素的尺寸
準確地確定 HTML 元素的尺寸對於元素定位和內容佈局等任務至關重要。本文探討了檢索給定元素的實際寬度和高度的不同方法。
方法1：Element.offsetWidth 和Element.offsetHeight
這些屬性提供元素的像素寬度和高度，包括內邊距和邊框，但不包括邊距。所有主流瀏覽器都支援它們。
var divElement = document.getElementById('myDiv');
var width = divElement.offsetWidth;
var height = divElement.offsetHeight;方法 2：getBoundingClientRect()
此方法傳回一個包含元素的各種尺寸和位置資訊的物件。特別是，寬度和高度屬性表示應用 CSS 轉換後元素的大小。
var divElement = document.getElementById('myDiv');
var boundingRect = divElement.getBoundingClientRect();
var width = boundingRect.width;
var height = boundingRect.height;方法 3：offsetParent
雖然不如前面的精確方法中，offsetParent 可用於確定元素相對於其父元素的位置。透過遞歸計算偏移寬度和高度，可以近似元素的真實尺寸。不過，並非所有瀏覽器都支援此方法。
function getOffsetDimensions(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
var parent = element.offsetParent;
while (parent) {
width += parent.offsetWidth;
height += parent.offsetHeight;
parent = parent.offsetParent;
}
return { width: width, height: height };
}以上是如何準確取得HTML元素的尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
