前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery方法position()与offset()区别

jQuery方法position()与offset()区别

作者头像
欢醉
发布2018-01-22 16:13:50
7050
发布2018-01-22 16:13:50
举报
文章被收录于专栏:james大数据架构

参考别人写得比较明白的,红色部分为重点吧:

使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同。

可以看看下边的图:

从图中我们可以大体看出两者的区别。

position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。

offset()始终返回相对于浏览器文档的距离,它会忽略外层元素

下边看个简单的例子,这里外层的div元素(position:relative)仅一个:

代码语言:javascript
复制
<divid="outer"style="width:200px;position:relative;left:100px;"><divid="inner"style="position:absolute;left:50px;top:60px;"></div></div>
代码语言:javascript
复制
//获取相对于最近的父级(position:relative)的位置var vposition = $("#inner").position();
alert(vposition.left);//输出:50
alert(vposition.top);//输出:60var voffset = $("#inner").offset();
alert(voffset.left);//输出:$("#outer").offset().left+50
alert(voffset.top);//输出:$("#outer").offset().top+60

在不同浏览器中,offset()得到的相对于浏览器的位置不同,相信你看了上边相应的注释,已经掌握了position()同offset()方法的区别。

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标(若在iframe中会有下拉框,相当于可见部分的垂直坐标)

event.offsetX 相对点击容器的水平坐标

event.offsetY 相对点击容器的垂直坐标

event.screenY 相对整个屏幕的垂直坐标

$(document).scrollTop(); //垂直滚动距离

$(XX).outerWidth() 对象宽度,包括padding

$(XX).outerHeight() 对象高度,包括padding

$(XX).offset().top; // 元素相对于document的上位移

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-05-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档