js 获取元素在页面上的偏移量的方法汇总

阅读时长 3 分钟读完

在前端开发中,经常需要获取元素在页面上的偏移量,以便进行定位和计算。这篇文章将介绍几种JS获取元素偏移量的方法,并包含相应的示例代码。

offsetLeft 和 offsetTop 属性

offsetLeft 和 offsetTop 是DOM元素的属性,用于获取元素相对于其offsetParent元素左侧和顶部的偏移量。以下是一个使用 offsetLeft 和 offsetTop 属性的示例代码:

需要注意的是,offsetLeft 和 offsetTop 只能获取到元素相对于其offsetParent元素的偏移量,如果元素的某个祖先元素设置了position: relative或position: absolute,则该祖先元素就成为了元素的offsetParent元素。

getBoundingClientRect() 方法

getBoundingClientRect() 方法返回一个矩形对象,该对象包含元素的位置、大小等信息。其中left和top属性表示元素相对于视口左侧和顶部的偏移量。下面是一个使用getBoundingClientRect()方法的示例代码:

需要注意的是,getBoundingClientRect() 方法返回的是相对于视口的偏移量,而不是相对于文档的偏移量。如果需要获取相对于文档的偏移量,可以通过加上滚动条的偏移量来计算。

offset() 方法

offset() 方法是jQuery提供的一个便捷的方法,用于获取元素相对于文档左侧和顶部的偏移量。以下是一个使用offset()方法的示例代码:

需要注意的是,offset() 方法只能用于jQuery对象,而不能用于原生DOM元素。

总结

本文介绍了三种JS获取元素在页面上的偏移量的方法,包括:使用 offsetLeft 和 offsetTop 属性、使用 getBoundingClientRect() 方法,以及使用 jQuery 的 offset() 方法。需要根据具体情况选择合适的方法进行使用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/2655

纠错
反馈