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

元素的宽度和高度.

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

1> Greg..：

---

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

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

---

谨防!如果您最近对元素进行了某些DOM修改,offsetHeight/offsetWidth可以返回0.修改元素后,可能必须在setTimeout调用中调用此代码.

---

@JDandChips:如果元素是`display:none`,`offsetWidth`将为0,而在这个实例中,计算的`width`可能仍然具有正值.`visibility:hidden`不会影响`offsetWidth`.

---

有关`.offsetWidth`和`.offsetHeight`的文档:https://developer.mozilla.org/en/Determining_the_dimensions_of_elements

---

在什么情况下会返回0？

---

@Supuhstar:`clientWidth`与`offsetWidth`有不同的含义:后者使用"整个"框,包括内容,填充和边框; 而前者仅产生内容框的大小(因此,只要元素具有任何非零填充和/或边框,它将具有更小的值).

---

我无法确定`offsetWidth`在我的情况下返回0的原因,因为我最初没有编写代码,但在`onload`事件中我始终为0.

---

@Supuhstar,它们有时会是相同的,例如当你设置`box-sizing:border-box`时,它会自动完成Bootstrap(我相信其他人).

2> Zach Lysobey..：

---

看看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注意:IE8及以下版本getBoundingClientRect不会返回高度和宽度.*

如果必须支持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

---

getboundingClientRect()将返回通过css缩放的元素的实际宽度和高度,而`offsetHeight`和`offsetWidth`则不会.

3> tvanfosson..：

---

注意:这个答案是在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();

4> Graham..：

---

为了防止它对任何人有用,我把一个文本框,按钮和div都放在同一个css中:

width:200px;
height:20px;
border:solid 1px #000;
padding:2px;

我尝试使用chrome,firefox和ie-edge,我尝试使用jquery而没有,我尝试了它有没有box-sizing:border-box.永远与

结果:

                                                               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

---

@ZachLysobey每个规则都有例外 - 这是一个很酷,有用的东西.

---

好吧......如果你的意图是*不*回答问题,那么这并不属于这里(作为"答案").我会考虑将其放在一些外部资源(可能是GitHub要点或博客文章)中,并将其链接到原始问题或其中一个答案的评论中.

5> HarlemSquirr..：

---

根据MDN:确定元素的尺寸

offsetWidth并offsetHeight返回"元素占用的总空间量,包括可见内容的宽度,滚动条(如果有),填充和边框"

clientWidth并clientHeight返回"实际显示的内容占用多少空间,包括填充但不包括边框,边距或滚动条"

scrollWidth并scrollHeight返回"内容的实际大小,无论当前有多少内容可见"

因此,这取决于预计测量的内容是否超出当前可视区域.

6> Kornel..：

---

您只需要为IE7和更早的版本（仅在您的内容没有固定大小的情况下）进行计算即可。我建议使用HTML条件注释来将黑客行为限制为不支持CSS2的旧IE。对于所有其他浏览器，请使用以下命令：

test
test

这是完美的解决方案。它可以居中对齐