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

我们先来了解一下,什么是offset().top和offsetTop?

offsetTop

解析一:

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

解析二:

当前对象到其上级层顶部的距离.

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

这是从网上找到的两种解析,您看着用,我也没搞懂,主要是打印不出offsetTop来。

如果需要获取当前元素到document的高度,建议使用jquery的offset().top。下面我们解析一下offset().top。

 offset().top

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

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

图2:document中的div有滚动条,提交按钮的offset随div的滚动变化而变化,与document无关

从上面这两个图,我们就知道jquery的offset.top的用法区别了。

Jquery中用offset().top和offsetTop的比较的更多相关文章

  1. jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

  2. jquery的offset().top与javascript的offsetTop区别?

    offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且pos ...

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

    1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...

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

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  5. js实现jquery的offset()

    用过jQuery的offset()的同学都知道 offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop ...

  6. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  7. jQuery中animate与scrollTop、offset().top实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  9. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

随机推荐

  1. git manual

    git init                                                  # 初始化本地git仓库(创建新仓库) git config --global us ...

  2. Extjs 选择元素涉及方法总结

    本文主要是解释Extjs在使用过程中使用的相关选择方法: 1.首先解释第一组概念: Ext.get(String/HTMLElement/Ext.Element el) Ext.getCmp(Stri ...

  3. Json Serialize 忽略特定属性

    Json Serialize 忽略特定属性 Json Serialize SerializeFilter 忽略特定属性 key words:Json Serialize jackson fastjso ...

  4. 【BZOJ】【3894】文理分科

    网络流/最小割 rausen大爷太神辣-作为一个蒟蒻还是搬运题解吧…… 很明显的一道网络流题.. 首先把所有值的加起来,再减掉网络流最小割值就好了,问题就是如何建图.这貌似也是考了好多次了的... 把 ...

  5. NPC AI驱动最基本过程

    NPC AI驱动最基本过程 NPCmgr中比较重要的是加载NPC和一个NPCAI的一个指针 他利用map那个线程的定时到底做了啥呢 void NPCmgr::npcAITimer() { time_t ...

  6. JavaScript 文件上传类型判断

    文件上传时用到一个功能,使用html元素的input标签实现, <input id="imageFile" name="imageFile1" accep ...

  7. BZOJ2961: 共点圆

    好久没发了 CDQ分治,具体做法见XHR的论文… /************************************************************** Problem: 29 ...

  8. 翻译 - 元编程动态方法之public_send

    李哲 - MAY 20, 2015 原文地址:Metaprogramming Dynamic Methods: Using Public_send 作者:Friends of The Web的开发者V ...

  9. ExtJs之Element.select函数

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  10. hdu 1538 A Puzzle for Pirates 博弈论

    很经典的问题,思路转载自http://blog.csdn.net/ACM_cxlove?viewmode=contents 题目:这是一个经典问题,有n个海盗,分m块金子,其中他们会按一定的顺序提出自 ...