1.getBoundingClientRect()

getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性。

let client = e.target.getBoundingClientRect();

client.width // 宽度
client.height // 高度
client.top // 上边距(相对可视区域上方)
client.right // 右边距(相对可视区域右方)
client.bottom // 下边距(相对可视区域下方)
client.left // 左边距(相对可视区域左方)
client.x // x 轴坐标/left (相对可视区域左方)
client.y // y 轴坐标/top (相对可视区域上方)

2.获取浏览器网页的相关高度/宽度

body 对象的宽/高

document.body.clientWidth // body 对象宽度
document.body.clientHeight // body 对象高度

可见区域宽/高

document.documentElement.clientWidth // 可见区域宽度
document.documentElement.clientHeight // 可见区域高度

网页正文全文宽/高

document.body.scrollWidth
document.body.scrollHeight

网页上方滚动的上/左侧边距

document.body.scrollTop // 上方滚动距离(手机/平板)
document.body.scrollLeft // 左侧滚动距离(手机/平板)
document.documentElement.scrollTop // 上方滚动距离
document.documentElement.scrollLeft // 左侧滚动距离
window.pageXOffset // 上方滚动距离 window.scrollX 别名
window.pageYOffset // 左侧滚动距离 window.scrollY 别名

网页宽/高(包括边线的宽/高)

document.body.offsetWidth
document.body.offsetHeight
document.documentElement.offsetWidth
document.documentElement.offsetHeight

返回当前渲染窗口中和屏幕有关的属性 window.screen (包括边线和滚动条)

window.screen.width // 可用空间宽度
window.screen.height // 可用空间高度
window.screen.availWidth // 可用空间宽度
window.screen.availHeight // 可用空间高度
window.screen.availLeft // 可用空间左边距离屏幕(系统电脑)左边界的距离
window.screen.availTop // 可用空间上边距离屏幕(系统电脑)上边界的距离
window.screen.colorDepth
window.screen.pixelDepth
window.screen.orientation

注意: availLeft/availTop 大多数情况下，返回 0。

如果你在有两个屏幕的电脑上使用该属性，在右侧屏幕计算该属性值时，返回左侧屏幕的宽度（单位：像素），也即左侧屏幕左边界的 X 坐标。

在 Windows 中，该属性值取决于哪个屏幕被设为主屏幕，返回相对于主屏幕左边界的 X 坐标。就是说，即使主屏幕不是左侧的屏幕，它的左边界的 X 坐标也是返回 0。如果副屏幕在主屏幕的左侧，则它拥有负的 X 坐标。

[1] [2] - 左屏幕 availLeft 返回 0，右侧的屏幕返回左侧屏幕的宽度；

[2] [1] - 左侧屏幕 availLeft 返回该屏幕的 -width，右侧屏幕返回 0；

let setY = window.screen.height - window.screen.availTop;
let setX = window.screen.width - window.screen.availLeft;
window.moveTo(setX, setY);

3.获取元素对应的边距属性

获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的属性

let _dom = document.getElementById('container');

_dom.offsetHeight // 当前元素内容高度
_dom.offsetLeft // 当前元素相对父元素的偏移距离(不包括当前元素内边距)
_dom.offsetTop // 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
event.clientX // 相对文档的水平坐标   
event.clientY // 相对文档的垂直坐标   
event.offsetX // 相对容器的水平坐标   
event.offsetY // 相对容器的垂直坐标

注意：offsetTop/offsetLeft 是相对定位父级的偏移量，如果需要可以使用 getBoundingClientRect().top 与 scrollTop 解决现有问题

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5951