获取元素的几何尺寸、offsetWidth、offsetHeight、clientWidth、clientHeigh、offsetX offsetY、pageX pageY

1、获取当前页面卷去（滚轮后覆盖）的距离  

window.pageYOffset || document.body.scro ll Top||document.documentElement.scro ll Top

 

2、 获取页面选中元素的DOM属性

<script>
			var el=document.querySelector(".box")
			var re=el.getBoundingClientRect();
			console.log(re)

 3、offsetWidth的实际宽度（offsetHeight同理）

            offsetWidth = width + 左右padding + 左右boder

 

4、offsetTop实际宽度（offsetLeft同理）

                       offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
 

5、client

clientWidth的实际宽度：clientWidth = width+左右padding

clientHeigh的实际高度：clientHeigh = height + 上下padding 

clientTop的实际宽度：clientTop = boder.top(上边框的宽度)

clientLeft的实际宽度： clientLeft = boder.left(左边框的宽度)

6、鼠标指针：

pageX pageY:鼠标指针的位置，文档的坐标。

offsetX offsetY:鼠标相对于事件源元素的x,y坐标