获得元素相对于当前窗口的上下左右位置

最新推荐文章于 2024-08-19 14:54:51 发布

原创最新推荐文章于 2024-08-19 14:54:51 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#frontend

frontend 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用JavaScript中的getBoundingClientRect方法来获取网页元素相对于浏览器视口的位置，并通过实例代码演示了如何计算元素距离页面顶部的实际距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

object.getBoundingClientRect().top/left/bottom/right可以获得元素相对于当前窗口的上下左右位置。

测试代码：

/*

FF:document.documentElement.scrollTop
Chrome:
document.body.scrollTop
元素#test2距离页面顶部的值等于#test2相对于当前窗口顶部的距离+当前页面滚动的高度.
*/
var div = document.getElementById('test2');
var b = div.getBoundingClientRect().top+ (document.documentElement.scrollTop || document.body.scrollTop );
console.log(b);

var c = $('#test2').offset().top;
console.log(c);