IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

获取元素在页面的绝对位置

记事本 2010-08-04 00:06:48 累计浏览 1,716 次
本机暂存
标签 CSS DOM JavaScript

源代码：

以下是代码片段：

var getCoords = function (el) {
    var box = el.getBoundingClientRect(),
        doc = el.ownerDocument,
        body = doc.body,
        html = doc.documentElement,
        clientTop = html.clientTop || body.clientTop || 0,
        clientLeft = html.clientLeft || body.clientLeft || 0,
        top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) - clientTop,
        left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft;
    return { 'top': top, 'left': left };
};

其中self.pageYOffset为window.self.pageYOffset，是火狐的一个属性，相当于document.body.scrollTop。以下是它的定义：

Definition: The pageYOffset property is used to determine the Y coordinate of the scroll position in some browsers. This is not a reserved word so you can declare your own variable or function called pageYOffset but if you do then you will not be able to find or alter the scroll position of a window in some browsers.

同分类推荐文章

  1. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 （累计阅读 48,350）
  2. 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
  3. 深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,405）
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情？ （累计阅读 15,934）
  5. 图片动态局部毛玻璃模糊效果的实现 （累计阅读 14,849）
  6. 天朝第二代身份证号码的验证机制 （累计阅读 14,764）
  7. HTML 5 的data-* 自定义属性 （累计阅读 14,349）
  8. 分享一个JQUERY颜色选择插件 （累计阅读 14,224）
  9. 什么是全栈工程师？ （累计阅读 14,039）
  10. 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）