确定 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中文网其他相关文章！
