Jquery中offset()和position()的区别分析【jquery】

web前端|js教程 Jquery中offset()和position()的区别分析【jquery】

Jquery,offset,position,区别

web前端-js教程

本文实例分析了Jquery中offset()和position()的区别。分享给大家供大家参考。具体分析如下：

分享程序网站源码,鸿蒙vscode连接串口,ubuntu 壁纸目录,tomcat启动键改名,sqlite跨库复制表c,怎样来判断爬虫行为是不是合法的,php 删除数组中的值,山西seo优化哪里不错,metinfo企业网站管理系统,内容页html模板lzw

A、Jquery中offset()

公开的网站源码,ubuntu界面改密码,爬虫脚本怎么开发,php8支持方法重载吗,英文seo很难lzw

获取匹配元素在当前视口的相对偏移。总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

收缩展开源码,在线网页版vscode,ubuntu 网络检查,tomcat的配置详解,编程爬虫教程,php 判断文件是否图片,潭州学院seo怎么样,问卷调查网站前端源码,ecshop 手机模板去版权lzw

例如：

    p { margin-left:10px; }      Hello
2nd Paragraph
 var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );

B、Jquery中position()

获取匹配元素相对父元素的偏移。更通俗一点，含有position:relative的元素的最近的父元素或祖先元素—的位置。如果未能找到这样的父元素或祖先元素，那么会计算相对于文档（即视区左上角）的位置. 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。

例如：

      div { padding: 15px;}  p { margin-left:10px; }         Hello
 
   var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top );

C、offset()和position()的区别

1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口，不包括浏览器的菜单栏等，当然我们也不太需要使用jquery来控制整个浏览器，我们所要控制的是页面窗口。

2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式，则其处理方式和offset()一样，是当前窗口的偏移量。

3、使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移

4、使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。

5、一般情况下，如果要显示的元素B存放在元素A的同一父元素下（即B为A的兄弟节点），这个时候使用position() 是最合适的；如果显示的元素B存放在DOM的最顶端或者最底端（即其父元素就是body）。这个时候用offset()是最好的。

position