一尘不染

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

javascript

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

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


阅读 306

收藏
2020-04-25

共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,
}
2020-04-25