如何取得 HTML 元素的真實寬度和高度？

確定 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
//   ...
// }

瀏覽器支援

現代瀏覽器都支援這兩種技術，包括：

• Chr ome
• Firefox
• Edge
• Safari
• Opera

以上是如何取得 HTML 元素的真實寬度和高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！