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

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

我应该用什么?请包括浏览器兼容性信息。

当前回答

你应该使用. 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,
}

2008-11-16 19:35:11

其他回答

元素。offsetWidth和元素。offsetHeight应该这样做，就像在之前的帖子中建议的那样。

但是，如果您只想集中内容，还有更好的方法。假设您使用严格的xhtml DOCTYPE。设置body标签的margin:0,auto属性和所需宽度(px)。内容与页面居中对齐。

2008-11-16 19:50:32

．.．看起来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>

2012-03-01 00:21:40

根据MDN:确定元素的尺寸

offsetWidth和offsetHeight返回“一个元素占用的空间总量，包括可见内容的宽度、滚动条(如果有的话)、填充和边框”

clientWidth和clienttheight返回“实际显示内容占用的空间大小，包括填充，但不包括边框、页边距或滚动条”

scrollWidth和scrollHeight返回“内容的实际大小，不管当前有多少可见”

因此，这取决于所测量的内容是否预计在当前可视区域之外。

2018-03-01 20:38:01

你应该使用. 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,
}

2008-11-16 19:35:11

你只需要为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>居中，并将其收缩到其内容的大小。

2008-11-16 20:57:23

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

推荐文章

最新文章

标签