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