获取元素在页面中位置

Posted 2021-01-21 yiangli

1.通过元素的offsetLeft和offsetTop

var domObj = docunment.getElementById(‘dom‘);
domObj.offsetLeft;//10
domObj.offsetTop;//10

　　在这里，dom元素的offsetLeft、offsetTop指的是元素相对于其offseParent指定的坐标来说的。offsetParent：是指当前元素最近的经过定位的父级元素，如果没有则一直向上直至body。注意当前元素为fixed时，其offsetParent的值为null。

拓展：

　　offsetWidth/offsetHeight: width+padding+border

　　clientLeft/clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）//个人理解为border值

　　clientWidth/clientHeight: width+padding

　　scrollWidth:获取对象的滚动宽度 
　　scrollHeight: 获取对象的滚动高度。 
　　scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
　　scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

2.event.clientX和event.clientY

事件相对于文档的水平和垂直距离

3.getBoundingClientRect

var domObj = docunment.getElementById(‘dom‘);
domObj.getBoundingClientRect();

　　方法返回一个一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。