[链接](https://www.cnblogs.com/moqiutao/p/6639792.html) ~~~ box.offsetTop；box.offsetLeft: 指的是box相对于wrap偏移的距离。 box.offsetWidth；box.offsetHeight:指的是box的可视宽度和高度 ~~~ offsetLeft：获取自身左外边框到定位父级的左内边框的距离 offsetTop ： 获取自身上外边框到定位父级的上内边框的距离 只能获取不能修改 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型 obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型 obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型 event.clientX(Y)分别是鼠标相对于浏览器内容窗口左边和上边的偏移像素数值 scrollTop, scrollLeft 这两个属性是相对于滚动条,垂直位置，当滚动条不存在的时候，obj.scrollLeft 和obj.scrollTop的值为0，滚动条存在的时候， 不同位置值是不同的。 ### 各浏览器下获取scrollTop的差异: * IE6/7/8：可以使用 `document.documentElement.scrollTop`；  * IE9及以上：可以使用`window.pageYOffset`或者`document.documentElement.scrollTop ` * Safari：`window.pageYOffset` 与document.body.scrollTop都可以；  * Firefox:：火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者 `document.documentElement.scrollTop`； * Chrome：谷歌浏览器只认识`document.body.scrollTop`; ## offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别 * `offsetWidth/offsetHeight`返回值包含**content + padding + border**，效果与e.getBoundingClientRect()相同 * `clientWidth/clientHeight`返回值只包含**content + padding**，如果有滚动条，也**不包含滚动条** * `scrollWidth/scrollHeight`返回值包含**content + padding + 溢出内容的尺寸**