如何检索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地方的问题（正如在这里的评论中所讨论的）
另一个区别是getBoundingClientRect()可能会返回小数像素，其中.offsetWidth和.offsetHeight将舍入到最接近的整数。
IE8注意 ： getBoundingClientRect不会在IE8及更低版本上返回高度和宽度。*
如果您必须支持IE8，请使用.offsetWidth和.offsetHeight ：
var height = element.offsetHeight; var width = element.offsetWidth;
参考：
-
.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();
以防万一它对任何人有用，我把一个文本框，按钮和div所有相同的CSS：
width:200px; height:20px; border:solid 1px #000; padding:2px; <input id="t" type="text" /> <input id="b" type="button" /> <div id="d"></div>
我尝试了铬，Firefox和IE边缘，我试着用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
你只需要计算IE7和更旧（只有当你的内容没有固定的大小）。 我建议使用HTML条件注释来限制对不支持CSS2的老IE。 对于所有其他浏览器使用这个：
<style type="text/css"> html,body {display:table; height:100%;width:100%;margin:0;padding:0;} body {display:table-cell; vertical-align:middle;} div {display:table; margin:0 auto; background:red;} </style> <body><div>test<br>test</div></body>
这是完美的解决方案。 它以任何大小的<div>为中心，并将其缩小为其内容的大小。
element.offsetWidth和element.offsetHeight应该如前面的帖子所建议的那样做。
但是，如果您只想将内容居中，那么有更好的方法。 假设你使用xhtml严格的DOCTYPE。 设置边距：0，自动属性和px所需的宽度为body标签。 内容与页面中心对齐。
…似乎CSS的帮助把div中心…
<style> .monitor { position:fixed;/* ... absolute possible if on :root */ top:0;bottom:0;right:0;left:0; visibility:hidden; } .wrapper { width:200px;/* this is size range */ height:100px; position:absolute; left:50%;top:50%; visibility:hidden; } .content { position:absolute; width: 100%;height:100%; left:-50%;top:-50%; visibility:visible; } </style> <div class="monitor"> <div class="wrapper"> <div class="content"> ... so you hav div 200px*100px on center ... </div> </div> </div>
你也可以使用这个代码：
var divID = document.getElementById("divid"); var h = divID.style.pixelHeight;
如果offsetWidth返回0，则可以获取元素的样式宽度属性并搜索数字。 “100px” – > 100
/\d*/.exec(MyElement.style.width）
