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

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

我该怎么用？请包含有关浏览器兼容性的信息

答案

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

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

看看Element.getBoundingClientRect() 。

此方法将返回包含width ， height和一些其他有用值的对象：

{
    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和.offsetHeight在有时返回0地方.offsetWidth的问题（正如这里的评论所述）

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

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

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

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

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

有关这方面的更多信息：如何最好地将 ClientRect / DomRect 转换为普通对象

参考：

.offsetHeight ： https ： //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
.offsetWidth ： https ： //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
.getBoundingClientRect() ： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

注意：这个答案是在 2008 年写的。当时最适合大多数人的跨浏览器解决方案实际上是使用 jQuery。我将这里的答案留给后人，如果你使用的是 jQuery，这是一个很好的方法。如果您正在使用其他框架或纯 JavaScript，那么接受的答案可能就是您的选择。

作为 jQuery 的 1.2.6 可以使用芯的一个CSS 功能， height和width （或outerHeight和outerWidth ，根据需要）。

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();