假设我有一个<div>我希望在浏览器的显示（视口）中居中的。为此，我需要计算<div>元素的宽度和高度。
我应该使用什么？请提供有关浏览器兼容性的信息。
如何检索 HTML 元素的实际宽度和高度？
IT技术
javascript
html
dhtml
2021-02-02 13:27:32
6个回答
您应该使用.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,
}
看看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（在讨论的意见在这里）
另一个区别是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 函数, heightand width（或outerHeightand outerWidth，视情况而定）。
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
以防万一它对任何人有用，我都使用相同的 css 放置了一个文本框、按钮和 div：
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
我在 chrome、firefox 和 ie-edge 中尝试过，我尝试过使用 jquery 和不使用 jquery，我尝试过使用和不使用box-sizing:border-box. 始终与<!DOCTYPE html>
结果：
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
offsetWidth并offsetHeight返回“元素占用的空间总量，包括可见内容的宽度、滚动条（如果有）、内边距和边框”
clientWidth并clientHeight返回“实际显示内容占用多少空间，包括填充但不包括边框、边距或滚动条”
scrollWidth并scrollHeight返回“内容的实际大小，无论当前有多少可见”
所以这取决于被测内容是否预计会超出当前的可视区域。