jQuery获得元素位置offset()和position()的区别
jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是 static的话,会被改成relative来实现重定位。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/ 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 }; |
使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
例如:要显示的元素存放在DOM的最顶端或者最底端(即其父元素就是body),这时用offset()是最好的。
转自:http://www.popo4j.com/article/jQuery-absolute-relative-position.html
jQuery获得元素位置offset()和position()的区别的更多相关文章
- offset()与position()的区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...
- js和jq中常见的各种位置距离之offset()和position()的区别(二)
offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...
- jQuery 获取元素当前位置offset()与position()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- jquery offset()和position()的区别
<script src="jquery/jquery-3.3.1.min.js"></script> <script type="text/ ...
- jquery的offset与position的区别
这里offset取得是屏幕影藏的y轴的距离➕元素距离屏幕的y轴的距离. 而postion取得的则是,上一个父元素(包含postion定位的)的距离
- jquery 获取元素在浏览器中的绝对位置
代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
- 区分jquery中的offset和position
一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...
- .offset()与.position()区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...
- Jquery中的offset()和position()深入剖析(元素定位)
先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...
随机推荐
- sqoop1的安装以及数据导入导出测试
下载 wget http://mirror.bit.edu.cn/apache/sqoop/1.4.7/sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz 解压 tar -zxf ...
- 高负载均衡学习haproxy之安装与配置
https://www.cnblogs.com/ilanni/p/4750081.html
- 多线程--Java
多线程: 1.进程和线程 进程是资源分配的最小单位,线程是CPU调度的最小单位. 每个进程的创建都需要系统为其开辟资源内存空间,并发执行的程序在执行过程中分配和管理资源的基本单位,速度和销毁也较慢.进 ...
- Simple2D-15(音乐播放器)使用 glfw 库
glfw 是一个专门针对 OpenGL 的 C 语言库,它提供了一些渲染物体所需的最低限度的接口.它允许用户创建 OpenGL 上下文,定义窗口参数以及处理用户输入. 这次打算使用 GLFW 替代掉 ...
- 11 并发编程-(线程)-信号量&Event&定时器
1.信号量(本质也是一把锁)Semaphore模块 信号量也是一把锁,可以指定信号量为5,对比互斥锁同一时间只能有一个任务抢到锁去执行, 信号量同一时间可以有5个任务拿到锁去执行, 如果说互斥锁是合租 ...
- Linux逻辑卷的拉伸和缩小
相对于普通磁盘优势是逻辑卷可以在线动态的拉伸(不用先unmount操作),只要vg中有足够的空间即可 1:首先查看vg是否有足够的空间 [root@gechong mapper]# vgdisplay ...
- 常用类一一字符串相关类一一String类 字符串的使用
Java字符串就是Unicode字符序列,例如“Java”就是4个Unicode字符J,a,v,a组成的. Java没有内置的字符串类型,而是在标准Java类库中提供了一个预定义的类String,每个 ...
- Docker三剑客之 Compose
简介 Docker-Compose 是 Docker 的一种编排服务,是一个用于在 Docker 上定义并运行复杂应用的工具,可以让用户在集群中部署分布式应用. 通过 Docker-Compose 用 ...
- Android模拟器内安装应用
一.通过apk安装器安装应用 1.下载apk安装器(网上随便搜一个就可以) 2.下载要测试的应用的apk,我这里下载的是微信的apk 3.打开apk安装器,点击右上角的Devices选择要安装到的设备 ...
- cdoj第13th校赛初赛F - Fabricate equation
http://acm.uestc.edu.cn/#/contest/show/54 F - Fabricate equation Time Limit: 3000/1000MS (Java/Other ...