jQuery获取页面元素绝对与相对位置的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下:

获取页面某一元素的绝对X,Y坐标,可以用offset()方法:

var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;

获取相对(父元素)位置:

var X = $('#DivID').position().top; 
var Y = $('#DivID').position().left; 
var pleft = $("selector").scrollLeft();//元素相对于滚动条左边的偏移量
var pTop = $("selector").scrollTop();//元素相对于滚动条顶部的偏移量

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 #Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 #Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 #Javascript
javascript中一些util方法汇总
Jun 10 #Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 #Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 #Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 #Javascript
You might like
PHP 面向对象 final类与final方法
2010/05/05 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
微信小程序 网络通信实现详解
2019/07/23 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
JS实现小星星特效
2019/12/24 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python中logging日志库实例详解
2020/02/19 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
道德模范事迹材料
2014/12/20 职场文书
财务经理岗位职责
2015/01/31 职场文书
民事二审代理词
2015/05/25 职场文书
公司欠款证明
2015/06/24 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Python函数对象与闭包函数
2022/04/13 Python