offset:是基于一个元素来讲,基于一个元素的整体来说。如一个div元素,一个body元素。
值及说明:
offsetWidth:整个div的外边界宽度,也就是说包括边框在内。
offsetHeight:同理,高度,包括边框。
offsetLeft:从整个div元素的外边界开始,向左移动,直到碰到下一个元素的边界(无论是内边界或外边界)。
offsetTop:同理,向上移动,直到碰到下一个元素的外边界(无论是内边界或外边界)。
client:是基于一个元素的可视区域来讲,即一个元素展示出来的平面的可视区域,不包括隐藏的、卷起的区域。
值及说明:
clientWidth:元素平铺在界面上,可看到的区域的宽度。
clientHeight:同理,可看到的区域的宽度。
clientLeft:从 元素可视区域开始,向左移动,直到遇到一个边界(最大的可能是遇到自身offset元素的外边界)。
clientTop:同理,向上移动,直到遇到一个边界(最大的可能是遇到自身offset元素的外边界)。
scroll:基于存在卷曲行为的元素来说的。
如果一个元素原来的大小是:1000px * 1000px,可视区域的大小:800px * 800px
scrollWidth:1000px;没卷之前,元素的实际宽度。
scrollHeight:1000px;没卷之前,元素的实际高度。
scrollTop:0~200px;被向上卷起来的高度。
scrollLeft:0~200px;被向左卷起来的高度。
对这部分知识的理解一直很模糊,参考一些文档后的理解,有可能存在错误之处。