offsetLeft与offsetX

offsetWidth offsetHeight

得到的是数字，无px单位，包含padding、border，不包含margin

clientWidth clientHeight

在offsetWidth和offsetHeight的基础上减去border

scrollHeight scrollWidth

内容超出是获取的总内容高度，不包含border和margin，如果没有滚动条和clientHeight和clientWidth是一样的

clientLeft clientTop

获取的是元素左边框和上边框的宽度

offsetLeft offsetTop offsetParent

offsetLeft和offsetTop获取的就是相对于offsetParent父元素的横向和纵向的坐标

offsetParent指的是最近的有定位属性的祖先级，如果都没有定位，得到body

scrollTop scrollLeft

兼容 var top = document.documentElement.scrollTop || document.body.scrollTop var left = document.documentElement.scrollLeft || document.body.scrollLeft

获取滚动内容上方和左方的位置，也就是隐藏的内容的高度和宽度

让滚轮默认在元素底部：scrollTPop = scrollHeight-clientHeight

offsetX offsetY

距离点击最小的元素边缘（父元素）的横、纵坐标

clientX clientY

浏览器的可视区域的横、纵坐标

screenX screenY

获取到整个屏幕边缘的横、纵坐标

pageX pageY

无滚动条或者滚动条在最顶部，等同clientX、clientY；有滚动条计算包含滚动条的总值

 

 

注意

offsetLeft 和offsetX相似 注意区分 offsetLeft相对于offsetParent offsetParent的有定位，定位 ，定位 ，没有定位一直往上找，找到body 而offsetX是距离点击最小元素边缘 无定位要求

 

offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）

offsetLeft/offsetTop 元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档

offsetWidth/offsetHeight返回元素的视觉尺寸（width+padding+border）

注意：offsetLeft和offsetWidth都是dom元素上的属性，而offsetX是function上event的属性

e.clientX e.clientY