本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本文用于记录js在使用中，会用得到的关于dom位置、宽高、鼠标位置的等方法与属性，便于学习与日常使用。

元素位置属性

属性	解释
offsetWidth、offsetHeight	可视宽高，内容区+padding+border+滚动轴宽度，平时一般没有滚动轴，所以基本都是内容区+padding+border
offsetLeft、offsetTop	左边与上边与设置了定位的父级的距离
clientWidth、clientHeight	内容区+padding，不包括border
clientLeft、clientTop	client内容区域边到offset可视区域边的距离，因为两个差别就是border，可以简单理解为左、上边框border宽度
scrollTop、scrollLeft	水平垂直方向滚动距离
scrollWidth、scrollHeight	滚动的内容宽度与高度

获取元素四周与浏览器屏幕视窗位置方法

要想获得与屏幕的关系，一般是在有滚动的情况下可以用于计算，用到的是元素的getBoundingClientRect方法。

该方法返回的对象上存在如下属性：

属性	解释
top	元素最上面，距离屏幕顶部距离
bottom	元素最下面，距离屏幕顶部距离
left	元素最左边，距离屏幕左部距离
right	元素最右边，距离屏幕左部距离
x	元素左上角的距离屏幕左部距离，一般与left一致
y	元素左上角的距离屏幕顶部距离，一般与top一致
width、height	可视宽高，一般与元素位置属性offsetWidth、offsetHeight一致

浏览器屏幕可视宽高

document.documentElement就可以看作html标签元素也就是主根元素。

document.body就是body标签元素也就是文档元素。

属性	解释
document.documentElement.clientWidth、document.documentElement.clientHeight	屏幕可视宽高，不包括滚动轴
window.innerWidth， window.innerHeight	屏幕可视宽高，注意，这会包括浏览器横向与纵向的滚动轴，只有不存在滚动轴或滚动轴无宽度才能达到获取可是宽高的目的

鼠标位置

属性	解释
e.x、e.y	鼠标距离可视屏幕区域左侧与上方的距离

document.getElementById('box').onmousemove = (e) => {
    console.log(e.x,e.y)
}

鼠标在某元素上的位置

获取计算	解释
e.x - box.getBoundingClientRect().x	鼠标距离元素左侧距离，也就是在元素上的x值。
e.x - box.getBoundingClientRect().left	同上
e.y - box.getBoundingClientRect().y	鼠标距离元素上侧距离，也就是在元素上的y值。
e.x - box.getBoundingClientRect().top	同上

const box = document.getElementById('box')
box.onmousemove = (e) => {
    console.log(
        e.x - box.getBoundingClientRect().x,
        e.y - box.getBoundingClientRect().y
    )
}

滚动位置

如果不是自己设定的div滚动窗口，就用浏览器的滚动窗口，有很多种监听事件。

window.onscroll、document.onscroll、document.body.onscroll、document.documentElement.onscroll这些都是一个效果，但是兼容性不一。

最好统一就使用window.onscroll，它的兼容性最好，基本支持所有浏览器。

如果是自己设定的div滚动框也可以，同样没有兼容问题。

浏览器滚动轴横纵向已滚动距离（受滚动影响被隐藏的宽高）	兼容性
window.scrollX、window.scrollY	兼容较好推荐
window.pageXOffset、window.pageYOffset	兼容较好推荐
document.documentElement.scrollTop、document.documentElement.scrollLeft	兼容较差不推荐
document.body.scrollTop、document.body.scrollLeft	兼容较差不推荐

自定义div滚动横纵向已滚动距离（受滚动影响被隐藏的宽高）	兼容性
document.getElementById('box').scrollLeft、document.getElementById('box').scrollTop	无兼容问题

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~