JQ中的 offsetTop 和 offset().top 的区别

最新推荐文章于 2021-09-22 16:29:40 发布

转载最新推荐文章于 2021-09-22 16:29:40 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dujunfeng/p/7985474.html

本文详细解释了offsetTop和offset属性的概念，澄清了offsetTop并非指元素与浏览器窗口的距离，而是指元素与其最近的已定位父元素之间的距离。并通过实例说明了offsetTop属性无法直接修改，若要调整元素的位置，应使用style.top属性。

话不多说先上图：

offset()的top是指元素与document的上边的距离，而不是浏览器当前窗体的上边缘，如图

document高度超过window，浏览器出现滚动条，滚动滚动条，提交按钮的offset不变。

总结一下：offsetTop是当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

转载于:https://www.cnblogs.com/dujunfeng/p/7985474.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33941350

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

offsetTop和offset().top

u013742084的专栏

06-01

7762

前段时间写了一个视觉差滚动的demo，是用js实现的。第二次看这个例子，我想封装一个jquery插件。首先demo中有两个button需要在jq中对它们进行定位，然而问题来了我先得到第一张图片的位置，对图片中的button的top进行定位时，想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this

Js与Jq获取浏览器和对象值的方法

10-22

jQuery中也有类似的属性，如 `obj.offset().left` 和 `obj.offset().top` 获取元素相对于整个文档的位置，`obj.scrollLeft()` 和 `obj.scrollTop()` 用于返回或设置元素相对滚动条的位置。通过这些属性可以很方便地...

参与评论您还未登录，请先登录后发表或查看评论

jquery的offset().top 和position().top 详解和如何用js实现

annuobin1120的博客

12-20

586

1 jquery定义：　　offset().top 相对于当前文档的坐标（的高度）　　　　　　　　　　　ps:包括滚动条卷去的高度　　position().top 返回的是相对于其定位的祖辈元素的坐标（的高度）　　　　　　　　　　　　ps:包括滚动条卷去的高度一图胜千言！统一前提绿色容器 margin-top: 10px 　　每一个红色...

Jquery中用offset（）.top和offsetTop的比较

weixin_34409357的博客

04-30

1620

今天，想测试一个div与顶部的距离，用的是.offsetTop，但是offsetTop获得的值，怎么都打印不出来。折腾了半天，打印的结果都是undefined，虽然网上很多资料都说返回的是数值。虽然这个函数永不了，但是黄显钦找到了一个可以替代offsetTop的函数。那就是jquery的offset().top 我们先来了解一下，什么是offset（）.top和offsetTop？ ...

JQ的offset().top与js的offsetTop区别详解

weixin_30731305的博客

12-20

1132

一、前言最近在做一个图片懒加载的插件，就纵轴(Y轴)而言，我需要时时获取图片的上偏移量，好判断是否已进入视图区域，而我所理解的是offsetTop应该是跟offset().top一样的，然后陷入了因为不了解它们区别，而带来BUG的死坑。这里通过实验整理，做个清晰好懂的笔记，如果你也想弄清，建议复制我的代码跟着操作，印象会更为深刻。二、offset().top与offsetTop什么意思？它...

js实现jquery的offset()方法实例

10-24

如果不是，函数则将当前节点的offsetTop和offsetLeft值累加到offset对象中，然后递归调用自身，将父节点作为新的节点参数传递。使用getOffset()函数的示例代码如下： ```javascript var a = document....

Js与Jq 获取页面元素值的方法和差异对比

10-24

- `obj.offset().top`：返回元素相对于文档的垂直位置。 - `obj.scrollLeft()`：设置或返回相对于滚动条左侧的偏移。 - `obj.scrollTop()`：设置或返回相对于滚动条顶部的偏移。以上所述便是通过JS和jQuery获取...

jquery 设置元素相对于另一个元素的top值(实例代码)

12-01

在给定的标题和描述中，我们关注的是如何使用 jQuery 设置一个元素相对于另一个元素的 `top` 值，以便使它们在页面上呈现出特定的布局。首先，让我们理解基本概念。在 CSS 中，`top` 属性用于定义元素距离其包含块...

offsetTop，offset().top

GUYyyy的博客

10-30

1094

原文：here offsetTop与offset().top相同点： 1.当无滚动条且offsetTop与offset().top参照对象相同时，它们获取的值相同。 offsetTop与offset().top不同点： 1.offset().top与offsetTop偏移量参照对象不同，offset().top始终是文档，而offsetTop参照的对象是可变的。 2.offsetTop获取的偏移量不随滚动条滚动变化，但offset().top随着滚动条变化（注意滚动监听的是一个有滚动条的元素，而不是wind

offsetTop

extendworld的博客

08-23

1510

定位参照点 offsetTop 的定位是相对于 offsetParent 元素的 offsetParent的定义：与当前元素最近的经过定位(position不等于static)的父级元素类似于绝对定位的参照点。三种情况： position为fixed时，offsetParent为null，offsettop的值和top相等。此时元素是以视口来定位的。 position非fixed，...

jq offset().top和js offsetTop的区别

qq_38761664的博客

04-18

1175

offset().top是JQ的方法，当前绑定元素上边框相对于html上边界的偏移量。 offsetTop是原生JS的方法，当前绑定元素上边框相对离自己最近且position属性为非static的元素的偏移量 ...

各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight...

weixin_30525825的博客

08-26

491

1、.position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left； jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top...

offset().top和offsetTop

qq_43654065的博客

09-22

653

获取元素距离上方的位置。区别： offset().top属于jquery方法 offsetTop属于js方法。没什么区别

.offset().top 与 .offsetTop

JennyChen66的博客

11-03

2000

.offset().top 与.offsetTop

js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别

web_hwg的博客

04-10

3695

1.offsetLeft/offsetTop 在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。 2.offset().left/offset().top 返回或设置匹配元素相对于文档的偏移（位置）。无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。示例：#par

offsetTop与offset().top

Vivian_shuang的博客

07-22

617

DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> .wrap{ width: 200px; height: 200px; border: 1px solid deepskyblue; background-color: blanchedalmond;

详解JavaScript中top、clientTop、scrollTop、offsetTop的差异与应用

在JavaScript编程中，理解`top`、`clientTop`、`scrollTop`和`offsetTop`这四个属性的区别至关重要，特别是在处理网页布局和滚动相关的交互时。这些属性主要用于定位元素在浏览器视窗中的位置，以及与文档流、可视...