clientHeight 与 offsetHeight的区别和理解

clientHeight 与  offsetHeight的区别和理解。

clientHeight:  =( height + padding Height)

Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.

offsetHeight: = (height + padding Height + scrollBar + the border height)

Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.

再加入scrollHeight (=可见+不可见区域）

The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.

借用网上的这张图帮助我们理解这些值。

图二， scrollHeight（包括不可见区域的高度） vs clientHeight (可见区域高度）

 

好问题来了，用jQuery时，如何取得这些值呢？

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

上面的例子可以验证下：

$('#someDev').outHeight() == $('#someDev').get(0).offsetHeight ????