获取元素的位置(获取元素的三种方法)

导语：17、获取元素位置（必会）

1、通过元素的 offsetLeft 和 offsetTop

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:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

window.screen.availHeight/window.screen.availWidth: 浏览器去除上方工具栏和下放菜单栏可用宽高

window.screen.height/window.screen.width: 屏幕宽高

2、event.clientX 和 event.clientY 事件相对于文档的水平和垂直距离

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

免责声明:本站部份内容由优秀作者和原创用户编辑投稿，本站仅提供存储服务，不拥有所有权,不承担法律责任。若涉嫌侵权/违法的，请反馈，一经查实立刻删除内容。本文内容由快快网络小媛创作整理编辑！