今天仔细研究了一下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