在以往我都是对这些属性死记硬背，很少真正理解过，忘记了就查手册。看完本文我相信这种情况就不会再发生了。 [b]元素占据的物理空间的尺寸 [/b]如果你需要获得元素占据的物理空间，那么使用offsetHeight和offsetWidth。 自然而然此物理空间必然包含的有：padding、滚动条、border。这两个属性与getBoundingClientRect()的height和width属性是一致的。 为了帮助理解请看下图： [img]http://files.jb51.net/upload/201109/20110913224223969.png[/img]   [b]元素内容的可视区域的尺寸 [/b]可视区域包含padding，但是不包含border、滚动条。此时请使用clientHeight和clientWidth。 为了帮助理解请看下图： [img]http://files.jb51.net/upload/201109/20110913224229279.png[/img]   [b]元素全部内容的尺寸 [/b]如果你要获取元素内容的真正大小，当然也包含那些不可见的内容，此时你需要使用scrollHeight/scrollWidth。 例如一张600*400的图片被包含在一个300*300的可滚动的容器元素内，那么scrollWidth将返回600，而scrollHeight将返回400 实测： 当元素存在滚动条时，chrome浏览器获取元素的scrollHeight有时候不准确！但是本文的例子是正确的，不知道怎么重现。 [b]获取元素的真实尺寸[/b] 大部分场景，我们并不关心元素的全部内容的尺寸（window/document/body元素除外），最常用的恐怕还是获取元素占据的物理空间(offsetHeight/offsetWidth)。 比如对某段文字设置自定义的tooltip，这个时候需要获取目标元素的高度然后对tooltip进行定位。 不论是clientHeight还是offsetHeight它们都包含了padding，假设这段文字包含了100px的padding，这个tooltip的位置显然会极其的不准确。 因此获取元素的高度通常是需要去掉padding。 由于元素的style属性只能获取到内联样式的width/height，所以在IE中需要使用el.currentStyle.height/width， 而标准浏览器中使用window.getComputedStyle(el,null).width/height。 下面是我整理的园友Snandy的一个用户获取元素真实高度和宽度的方法 : 参考资料 [url=http://www.1sucai.cn/article/28277.htm]各情景下元素宽高的获取 by Snandy[/url] [url=https://developer.mozilla.org/en/Determining_the_dimensions_of_elements]Determining the dimensions of elements[/url] [url=http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx]Measuring Element Dimension and Location with CSSOM in Internet Explorer 9[/url]