元素偏移和相关知识点

1. 鼠标对象相关偏移

 1.clientX,clientY和x,y

        clientX,clientY和x,y是一样的，是基于浏览器可视区域的偏移，以浏览器可视区域的左上角为基准点，x,y是新的知识，为了新浏览器开发方便。

 2.offsetX,offsetY

        offsetX,offsetY是基于元素自身的左上角为基准点，注意是包含padding内边距的。

 3.layerX,layerY

        layerX,layerY是相对于有定位属性的祖先元素(包含父元素和自身)，如果不存在有定位属性的祖先元素，则以body的左上角为基准点。

4.pageX,pageY

        pageX,pageY是相对于页面左上角为基准点，可以理解为是clientX + window.scrollX和clientY + window.scrollY

5.screenX,screenY

        screenX和screenY和文档没关系，和样式没关系，只和电脑屏幕的左上角有关系，以屏幕左上角为基准点

2.元素对象相关偏移和相关知识点

 1. client(宽/高:width/height+padding)

        1.1clientWidth/clientHeight 包含内边距，但是不包含滚动条，边框和外边距 所有值会被四舍五入成整数(包括scroll和offset)，可以使用getBoundingClientRect获取小数。clientWidth返回元素内部的宽度,clientHeight返回元素内部的高度。

        1.2clientLeft/clientTop包含滚动条，不包含外边距或内边距。分别代表左边框的宽度和上边框的高度。

 2. offset(宽/高:width/height+padding+border)

        2.1 offsetWidth/offsetHeight包含元素的宽度和内边距和边框和滚动条。

        2.2 offsetTop/offsetLeft元素相对于上一个带有定位属性的祖先元素的距离。最远的祖先元素是body。

 3. scroll(宽/高:实际宽/高，包括超出的部分)

        3.1 scrollWidth/scrollHeight元素的实际宽度和高度

        3.2 scrollLeft/scrollTop元素超出部分的宽度/高度

3.getBoundingClientRect

       包含整个元素的最小矩形，包括padding和border。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口(可视区域)的左上角来计算的。

        top,left是元素上边和左边距离页面上边和左边的距离。

        bottom,right是元素下边和右边距离页面上边和左边的距离。

        x,y是盒子左上角距离页面左边和页面上边的距离。

        width/height是元素自身的宽和高。个人理解相当于offsetWidth和offsetHeight

参考链接: 苏恩博客