Javascript clientHeight/offsetHeight/scrollHeigt 比较

今天仔细研究了一下offsetHeight/scrollHeight/clientHeight 的区别，总结如下：

 

 

了解这些属性区别之前请先设想一个带有scrollbar的div，width:100px, height:100px, overflow:auto

 

reference:

http://msdn.microsoft.com/en-us/library/ms530302%28VS.85%29.aspx

 

explanation:

 

offsetTop/offsetLeft: relative to offsetParent

offsetWidth/offsetHeight: not including margin, but including border

 

 

scrollTop/scrollLeft: if you scroll the div, then the distance you scroll relative to left and top

scrollHeight: the total height of content, it might be longer that the visiable place, but no including the scrollbar' height

scrollWidth: the total width of content, it might be wider that the visiable place, but no including the scrollbar' width

 

 

clientHeight/clientWidth: the height and width for the visiable area, no including the scrollbar' width and height

clientTop/clientLeft: the border's height and width

 

 

padding affect all of width/height, scrollTop and scrollLeft

 

border affect offsetWidth/height clientTop/left

 

margin affect offsetTop/left