JS-尺寸与位置

元素尺寸与位置

通过js的方式，得到元素在页面中的位置

获取宽高

元素.offsetWidth
元素.offsetHeight

1）获取元素的自身宽高、包括元素自身设置的宽高+padding+border

2）获取出来的是数值，方便计算

3）注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

获取位置

方法一：

元素.offsetLeft
元素.offsetTop

1）获取元素距离自己定位父级元素的左、上距离（与最近一级带有定位的祖先元素;如果没有则以文档左上角为准）

2）注意是只读属性

方法二：

元素.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置；不受定位的父元素影响

结合文章：JS-事件-CSDN博客

鼠标位置坐标

pageX/Y

pageX/Y获取到的是触发点相对文档区域左上角距离，包含滚动条距离，会随着页面滚动而改变

IE9以前不兼容pageX/Y

元素.addEventListener('mousemove',function(e){
    console.log(e.pageX) //x轴距离
    console.log(e.pageY) //y轴距离
})

clientX/Y

鼠标位置相对于浏览器窗口的坐标，不随页面滚动而改变

元素.addEventListener('mousemove',function(e){
    console.log(e.clientX) //x轴距离
    console.log(e.clientY) //y轴距离
})

screenX/Y

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。