求元素距离浏览器上边和左边的距离

求元素距离浏览器上边和左边的距离

执念博客
2017-06-22 / 0 评论 / 6 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月05日,已超过48天没有更新,若内容或图片失效,请留言反馈。

offsetLeft:  获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:  获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

通俗点说,offsetLeft和offsetTop求得是该元素距离其父元素的距离,而不是真正意义上距离浏览器的距离,因此需要使用以下代码进行求解:
[code lang="js"]
var top = this.offsetTop;
var left = this.offsetLeft;
while(this = this.offsetParent){
top+=this.offsetTop;
left+=this.offsetLeft;
}
[/code]
其中this代表的是当前元素,通过while循环,一级一级的求出距离父元素的距离,则最后的结果就是该元素距离浏览器真实的距离。

不过最后由于浏览器存在滚动条,可能导致距离不准确,因此需要减去滚动条滚动的距离。
[code lang="js"]
top-=document.body.scrollTop;
left-=document.body.scrollLeft;
[/code]
最后得到的top和left就是该元素距离浏览器可视区域的真实距离。

本文共 214 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (0)

取消