getBoundingClientRect、offset、page、client、screen相关API及释义合集

1.getBoundingClientRect()获取元素位置

获取指定dom元素到浏览器可视窗口的距离，不包括被卷曲的部分，下方展示实验数据：

dom.getBoundingClientRect().top距离可视区顶部
dom.getBoundingClientRect().right距离可视区右侧
dom.getBoundingClientRect().bottom距离可视区底部
dom.getBoundingClientRect().left距离可视区左侧
dom.getBoundingClientRect().width宽度(返回小数) = dom.offsetWidth(返回整数)
dom.getBoundingClientRect().height高度(返回小数) = dom.offsetHeight(返回整数)

 

 2.offset

在为父元素设置了定位的情况下：

dom.offsetLeft：dom左边缘到父元素左边缘的距离

dom.offsetTop：dom顶部到父元素顶部的距离

 3.offsetX/Y    pageX/Y   screenX/Y  clientX/Y

侦听鼠标移动事件，将鼠标放在红色方框的左上角可发现：

e.pageX:：鼠标指针相对于整个文档的 x坐标(包括被页面卷曲的部分)
e.pageY：鼠标指针相对于整个文档的 y坐标
e.offsetX：鼠标指针相对于触发事件(鼠标所在元素内)对象的x坐标
e.offsetY：鼠标指针相对于触发事件(鼠标所在元素内)对象的y坐标

另补充：

e.screenX：鼠标指针相对于电脑屏幕的x坐标

e.screenY：鼠标指针相对于电脑屏幕的y坐标

e.clientX：鼠标指针相对于body页面可视区的x坐标

e.clientY：鼠标指针相对于body页面可视区的y坐标

下图为引用的释义（图片来源:pageX、clientX等的区别_朽木白露的博客-CSDN博客_pagex）

对比：

clientWidth = width+padding

clientHeight = height + padding

offsetWidth = width + padding + border(返回整数)

offsetHeight = height + padding + border(返回整数)

getBoundingClientRect().width = width + padding + border(返回小数)
getBoundingClientRect().height = height + padding + border(返回小数)