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

javascript html dhtml

2022-08-29 22:08:11

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

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

答案 1

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

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

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

> 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,
}

答案 2

看看Element.getBoundingClientRect（）。。

此方法将返回一个包含、和其他一些有用值的对象：widthheight

{
    width: 960,
    height: 71,
    top: 603,
    bottom: 674,
    left: 360,
    right: 1320
}

例如：

var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;

我相信这不存在他们有时会返回的问题（如此处的评论中所述）.offsetWidth.offsetHeight0)

另一个区别是可能返回小数像素，其中和将舍入到最接近的整数。getBoundingClientRect().offsetWidth.offsetHeight

IE8 注意：在 IE8 及以下版本上不返回高度和宽度。getBoundingClientRect

如果必须支持 IE8，请使用和：.offsetWidth.offsetHeight

var height = element.offsetHeight;
var width = element.offsetWidth;

值得注意的是，此方法返回的对象实际上并不是一个普通的对象。它的属性是不可枚举的（因此，例如，不能开箱即用。Object.keys

有关此内容的更多信息，请单击此处：如何最好地将 ClientRect / DomRect 转换为普通对象

参考：

.偏移高度： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
.偏移宽度： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
.getBoundingClientRect（）： https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect