小编典典

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

all

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

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


阅读 130

收藏
2022-02-28

共1个答案

小编典典

您应该使用.offsetWidthand.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,
}
2022-02-28