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

Question

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

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

Answer 1

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

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

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

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