微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

Jquery中的offset()和position()深入剖析_jquery

php中文网
发布： 2016-05-16 18:51:58
原创
1234人浏览过

先看看这两个方法的定义。
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
真的就这么简单吗？实践出真知。
先来看看在jquery框架源码里面，是怎么获得position()的：

ClipDrop
ClipDrop

Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

ClipDrop 112
查看详情 ClipDrop
复制代码 代码如下:

// Get *real* offsetParent
var offsetParent = this.offsetParent(),
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num( this, 'marginTop' );
offset.left -= num( this, 'marginLeft' );
// Add offsetParent borders
parentOffset.top += num( offsetParent, 'borderTopWidth' );
parentOffset.left += num( offsetParent, 'borderLeftWidth' );
// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};

点击下面的页面可以测试一下两个的区别：
相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：javascript 图片上传预览-兼容标准_javascript技巧 下一篇：js在Firefox与IE中对DOM对像的引用的比较_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript媒体处理_音频可视化技术 音频可视化通过WebAudioAPI提取频率数据，结合Canvas实时渲染波形或频谱图，广泛用于音乐播放器与互动艺术项目。
2025-11-22 16:35:48
594
JavaScript内容安全_CSP策略配置详解 CSP是一种浏览器支持的安全机制，通过HTTP响应头Content-Security-Policy定义可加载资源的可信源，防止XSS和数据注入攻击；其核心指令如script-src限制JavaScript执行，推荐使用‘self’、nonce或hash机制禁止内联脚本与eval，避免‘unsafe-inline’，并结合report-only模式与上报机制调试策略，提升Web应用安全性。
2025-11-22 16:33:07
720
解决 pywebview 中 Paper.js 绘图不显示的问题 本文针对在pywebview环境中使用Paper.js进行绘图时，路径无法正常渲染的问题提供了解决方案。核心在于确保Paper.js脚本的正确加载。通过将本地脚本引用替换为可靠的CDN链接，可以有效解决因脚本加载失败导致的绘图功能异常，从而使Paper.js路径能够成功显示并转换为图像。
2025-11-22 16:32:01
757
JavaScript渲染优化_重绘与回流避免 重绘与回流是影响页面性能的关键，回流因涉及布局重算代价更高；2.减少DOM操作频率，使用DocumentFragment或批量修改innerHTML；3.避免强制同步回流，采用“先读后写”模式处理样式读取与修改；4.通过CSS类切换和transform、opacity实现高效动画，配合requestAnimationFrame与硬件加速优化渲染。
2025-11-22 16:27:12
505
现代JavaScript_Promise并发控制 Promise并发控制指限制同时执行的异步任务数量，通过维护运行中任务数不超过上限，实现效率与稳定性的平衡，常用于批量请求场景。
2025-11-22 16:21:05
700
现代JavaScript_Array分组方法 JavaScript中常用reduce结合对象或Map实现数组分组，如按性别或年龄区间分类，兼容性好且逻辑清晰，推荐使用；Map适用于复杂键类型，而Object.groupBy为实验性新特性，暂不建议生产环境使用。
2025-11-22 16:19:02
394
通过ClickUp API高效获取指定用户逾期任务列表 本文将详细介绍如何利用ClickUpAPI高效且准确地获取指定用户的逾期任务列表。我们将探讨现有方法的局限性，并重点推荐使用官方支持的GetFilteredTeamTasks接口，结合assignees和due_date_lt参数，实现精确的任务筛选，避免采用复杂的链式查询或未文档化的API，确保方案的稳定性和可维护性。
2025-11-22 16:17:02
219
JavaScript：特定字符后首字母大写转换教程 本教程详细介绍了如何在JavaScript中，高效地将特定标点符号（如冒号、句号等）后第一个单词的首字母转换为大写，即使中间存在多个空格。文章通过正则表达式String.prototype.replace()方法，提供了一种简洁而强大的解决方案，避免了传统循环和条件判断的复杂性，确保了代码的健壮性和可读性。
2025-11-22 16:15:07
209
使用ClickUp API高效获取团队成员逾期任务列表教程 本教程旨在指导开发者如何通过ClickUpAPI高效且可靠地获取特定团队成员的逾期任务列表。我们将详细介绍官方推荐的GetFilteredTeamTasks接口及其关键参数，并对比分析其他不推荐的替代方案，提供清晰的API调用示例和注意事项，确保您能构建稳定且可维护的集成。
2025-11-22 16:12:01
850
ClickUp API实战：高效获取团队成员逾期任务列表 本文详细指导如何利用ClickUpAPI高效检索团队中每个成员的逾期任务。我们将分析现有方法的局限性，并重点推荐使用ClickUp官方支持的GetFilteredTeamTasks接口。通过精确配置团队ID、成员ID和截止日期过滤器，开发者可以实现快速、可靠地获取指定成员的逾期任务数据，避免了复杂的多步查询或依赖不稳定的未公开API。
2025-11-22 16:10:02
481
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部