Jquery中用offset().top和offsetTop的比较

摘要:
今天,我想测试一个div和顶部之间的距离。使用了OffsetTop,但无法打印OffsetTop获得的值。这就是偏移量()。jquery的顶部。让我们首先了解什么是偏移量()。top和offsetTop?OffsetTop解析1:假设obj是一个HTML控件。Obj.offsetTop是指相对于布局或由offsetParent属性、整数和单位像素指定的父坐标计算出的Obj的上位置。如果需要获取从当前元素到文档的高度,建议使用偏移量()。jquery的顶部。offset()。topoffset()的顶部是指元素与文档上边缘之间的距离,而不是浏览器当前表单的上边缘,如图1所示。

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

 

我们先来了解一下,什么是offset().topoffsetTop

offsetTop

解析一:

假设 obj 为某个 HTML 控件。

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

解析二: 

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

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

 

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

 

 

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

 offset().top

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

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

Jquery中用offset().top和offsetTop的比较第1张

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

Jquery中用offset().top和offsetTop的比较第2张

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

免责声明:文章转载自《Jquery中用offset().top和offsetTop的比较》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇FutureTask详解什么是内存(二):虚拟内存下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

使用 lua 编写 wireshark 协议解析插件

一、平台 操作系统:windows 7 wireshark:1.10.3 lua:5.1 二、准备 lua 语言基本语法,特别是关于表操作和循环 wireshark 文档,包括用户使用文档和开发者文档,这些在 wireshark 官方网站都能找到 三、开始 我们首先定义一个简单的协议,我们使用 C 语言的语法描述, 1 struct foo 2 { 3...

通过jquery实现form表单提交后不跳转页面,保留当前页面

jquery代码: <script type="text/javascript" src="http://t.zoukankan.com/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://t.zoukankan.com/js...

JQuery 之 Ajax 异步和同步浅谈

Ajax 同步和异步的区别 同步是当 JS 代码加载到当前 Ajax 的时候会把页面里所有的代码停止加载,页面出现假死状态;当这个 Ajax 执行完毕后才会继续运行其他代码此时页面假死状态才会解除。反之异步则 Ajax 代码在运行时,其余的 JS 脚本依旧能够运行。 在 Jquery 中可以通过 async 的 true 和 false 设置同步或异步,...

TS学习笔记--其他(声明文件、内置对象)

声明文件 // 引入第三方的库jquery import jquery from 'jquery'; // 定义操作 /* 当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。 声明语句: 如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码 declare var jQuery: (selector: s...

jquery或者javascript将list转array数组_快速开发平台

jquery或者javascript将list转array数组,软件开发平台软件开发过程中经常会碰到后台传过来的list数据模型要转换成array数组的情况,那么我们该怎么去做呢? 如上图是转换后的表现形式。 解决方案,for循环进行赋值转换。如下代码段: $.getJSON('GetSCKBNum', function (da...

top命令

收集了两篇关于介绍Linux中监控命令top命令的详细使用方法的文章。总的来说,top命令主要用来查看Linux系统的各个进程和系统资源占用情况,在监控Linux系统性能方面top显得非常有用,下面就是我收集的关于Linux top命令的文章,希望能帮到大家 top作为日常管理工作中最常用也是最重要的Linux 系统监控工具之一,可以动态观察系统进程状况。...