JavaScript中的 offset, client,scroll

在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下。

offset

div.offsetTop 指div距离上方或上层控件的距离，单位像素

div.offsetLeft 指div距离左侧或上层控件的距离，单位像素

div.offsetWidth 指div 控件本身的宽度，单位像素

div.offsetHeight 指div 控件本身的高度，单位像素

混淆点

clientWidth 指对象看到的宽度，不包含border

scrollWidth 是对象实际的宽度，如果有padding 则就是左 padding和右padding之间的距离，如果没有padding，则就是边框之间的距离。

offsetWidth 是指对象的宽度，（包含border，滚动条占的宽度，值会随着内容的输入而改变）。

scrollHeight 是指获取对象的滚动高度。

scrollLeft 是指获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop 是指获取位于对象最顶端和窗口中目前可见内容的最顶端之间的距离。

scrollWidth 获取对象的滚动宽度。

clientX 是指设置或获取鼠标指针位置相对于当前窗口的x坐标，不包括窗口自身的控件和滚动条。

clientY 是指设置或获取鼠标指针位置相对于当前窗口的Y坐标，不包括窗口自身的控件和滚动条。

offsetX 是指设置或获取鼠标指针位置相对于触发事件的对象的x坐标。

offsetY 是指设置或获取鼠标指针位置相对于触发事件的对象的Y坐标。