专栏首页james大数据架构jQuery方法position()与offset()区别

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

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

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

可以看看下边的图:

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

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

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

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

<divid="outer"style="width:200px;position:relative;left:100px;"><divid="inner"style="position:absolute;left:50px;top:60px;"></div></div>
//获取相对于最近的父级(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的上位移

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你真的会玩SQL吗?之逻辑查询处理阶段

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接、外连接 你真的会玩SQL吗?三范式、数据完整性 你真...

    欢醉
  • 0基础搭建Hadoop大数据处理-初识

      在互联网的世界中数据都是以TB、PB的数量级来增加的,特别是像BAT光每天的日志文件一个盘都不够,更何况是还要基于这些数据进行分析挖掘,更甚者还要实时进行数...

    欢醉
  • Android AlertDialog去除黑边白边自定义布局(转)

    LayoutInflater inflater = this.getLayoutInflater(); View view = inflater.inflate...

    欢醉
  • Kafka到底有几个Offset?——Kafka核心之偏移量机制

    ​ Kakfa的Offset机制是其最核心机制之一,由于API对于部分功能的实现,我们有时并没有手动去设置Offset,那么Kafka到底有几个Offset呢?

    实时计算
  • LeetCode | 类似的题目太多,四数之和比三数之和多了一层循环

    类似的题目都是由相同的数据去解决的,这说法到底对不对,可能要等多年看看是不是被打脸了。

    我脱下短袖
  • docker 实践手册

    其他参考 https://blog.csdn.net/styshoo/article/details/55657714

    orientlu
  • 32位和64位系统的区别

    64位系统和32位系统首先涉及到提取数据的能力,64位系统肯定比32位系统提取数据的能力强一倍 但是这只是建立在64位操作系统的64位软件上。 进程的64位...

    于小勇
  • HashMap- resize()

    HashMap是介于数组和链表之间的数据结构,其中存储元素式键值对。键值对的对象首先存储在数组里面,数组的下标式通过key的hash值来确定,如果出现Hash碰...

    来啦老弟
  • HashMap的尾部遍历问题 (Tail Traversing)

    JDK1.7的HashMap在实现resize()时,新table[]的列表采用LIFO方式,即队头插入。 这样做的目的是:避免尾部遍历。

    一个会写诗的程序员
  • 看房再现“黑科技”,AR让房屋平地而起

    VRPinea

扫码关注云+社区

领取腾讯云代金券