如何检索HTML元素的实际宽度和高度？

Question

假设<div>我希望在浏览器的显示（视口）中居中。为此，我需要计算<div>元素的宽度和高度。

我应该使用什么？请提供有关浏览器兼容性的信息。

Answer 1

您应该使用.offsetWidth和.offsetHeight属性。请注意，它们属于元素，而不属于.style。

var width = document.getElementById('foo').offsetWidth;

.getBoundingClientRect()执行CSS转换后，函数将元素的尺寸和位置作为浮点数返回。

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}