確定 HTML 元素的實際寬度和高度
要讓 HTML 元素在瀏覽器視窗中居中，需要精確計算它的尺寸。以下介紹如何有效率地取得元素的實際寬度和高度。
使用元素屬性
HTMLElement 介面的 .offsetWidth 和 .offsetHeight 屬性表示實際寬度和元素的高度。請注意，這些屬性是元素的一部分，而不是其 .style 物件。
const width = document.getElementById('foo').offsetWidth;使用 getBoundingClientRect()
或者，可以使用 getBoundingClientRect() 方法用於以浮點數形式取得視窗中元素的尺寸和位置。這包括應用 CSS 轉換後元素的位置、寬度和高度。
console.log(document.getElementById('foo').getBoundingClientRect());
// Output:
// DOMRect {
// ...
// width: 631, // Element's width in pixels
// height: 54.7, // Element's height in pixels
// ...
// }瀏覽器支援
現代瀏覽器都支援這兩種技術，包括：
以上是如何取得 HTML 元素的真實寬度和高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
