元素位置属性
如果不了解盒子模型建议先阅读一下:css 盒子模型详解。
属性 | 解释 |
---|
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 | 无兼容问题 |