如何计算一个元素距离body顶部的距离

sirzxj 2011-07-26 02:00:05

或者说，在文档上的绝对距离什么的

...全文

743 6 打赏收藏转发到动态举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

燥动的心 2011-07-26

打赏
举报

回复

[Quote=引用 3 楼 aspwebchh 的回复:]

HTML code
1
1
<br />
<div id="div" style="margin-top:20px">111111111</div>
<script language="javascript">
alert(document.getElementById("div").offsetTop)
</script>
[/Quote]引用

itliyi 2011-07-26

打赏
举报

回复

offsetTop

hch126163 2011-07-26

打赏
举报

回复

offsetTop

挨踢直男 2011-07-26

打赏
举报

回复

1

1

<br />

<div id="div" style="margin-top:20px">111111111</div>

<script language="javascript">

alert(document.getElementById("div").offsetTop)

</script>

MuBeiBei 2011-07-26

打赏
举报

回复

[Quote=引用 1 楼 knightzhuwei 的回复:]
offsetHeight
[/Quote]

正解

knightzhuwei 2011-07-26

打赏
举报

回复

offsetHeight

文章介绍了在JavaScript中如何通过offsetTop属性计算元素距离页面顶部的距离，尤其是在遇到元素的父级有定位属性时。通过递归方法或者使用offsetParent属性可以解决这个问题，确保获取到正确的偏移量。示例代码展示了这两种方法的实现。

本文通过实例讲解如何使用JavaScript计算元素距离页面顶部的距离，并实现一个悬浮按钮的效果。涉及视口高度、滚动高度、元素偏移量等API的使用，以及监听滚动事件来动态调整按钮状态。

本文探讨了在开发可见曝光SDK时遇到的问题，即元素offsetTop在有相对定位父元素时的计算不准确。作者指出，使用offsetTop需要递归计算，可能导致计算量大和精度问题。建议改用getBoundingClientRect方法结合滚动位置来更准确地计算元素的可视状态，以提高性能和准确性。

本文介绍了一种使用getBoundingClientRect方法精确获取DOM元素到body左侧和顶部距离的技术，该方法兼容性好，适用于多种浏览器，包括IE4。文章提供了完整的代码示例，展示了如何结合滚动条长度计算DOM元素到body边界的准确距离。

博客围绕判断子元素距离父元素顶部位置展开，给出了HTML和JavaScript代码示例。通过设置元素样式，利用jQuery的offset()和position()方法，分别计算子元素距离文档顶部、父元素顶部和窗口顶部的距离。

87,990

社区成员

224,684

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章