编程 Javascript

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

Posted in Javascript onMarch 06, 2014

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

<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span> 
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>

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

<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span> 
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别

Oct 18 Javascript

javascript垃圾收集机制与内存泄漏详细解析

Nov 11 Javascript

jquery 实现input输入什么div图层显示什么

Jun 15 Javascript

Javascript基础学习笔记(菜鸟必看篇)

Jul 22 Javascript

jQuery EasyUI中的日期控件DateBox修改方法

Nov 09 Javascript

微信页面倒计时代码（解决safari不兼容date的问题）

Dec 13 Javascript

JS 在数组指定位置插入/删除数据的方法

Jan 12 Javascript

JS判断时间段的实现代码

Jun 14 Javascript

利用require.js与angular搭建spa应用的方法实例

Jul 19 Javascript

使用 Node.js 模拟滑动拼图验证码操作的示例代码

Nov 02 Javascript

用p5.js制作烟花特效的示例代码

Mar 21 Javascript

微信小程序实现打开并下载服务器上面的pdf文件到手机

Sep 20 Javascript

Jquery easyUI 更新行示例

Mar 06 #Javascript

js toFixed()方法的重写实现精度的统一

Mar 06 #Javascript

button没写type=button会导致点击时提交

Mar 06 #Javascript

使用jQuery时Form表单元素ID和name命名大忌

Mar 06 #Javascript

js字符串日期yyyy-MM-dd转化为date示例代码

Mar 06 #Javascript

浅析JS中document对象的一些重要属性

Mar 06 #Javascript

浅析jquery的js图表组件highcharts

Mar 06 #Javascript

You might like

《五等分的花嫁》漫画完结！2020年10月第2期TV动画制作组换血！

2020/03/06 日漫

php sprintf()函数让你的sql操作更安全

2008/07/23 PHP

php 生成WML页面方法详解

2009/08/09 PHP

php笔记之：AOP的应用

2013/04/24 PHP

PHP中的命名空间相关概念浅析

2015/01/22 PHP

php输出xml属性的方法

2015/03/19 PHP

Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解

2016/03/07 PHP

php学习笔记之字符串常见操作总结

2019/07/16 PHP

laravel 错误处理,接口错误返回json代码

2019/10/25 PHP

javascript背投广告代码的完善

2008/04/08 Javascript

Javascript 函数对象的多重身份

2009/06/28 Javascript

javascript 写类方式之一

2009/07/05 Javascript

关于js datetime的那点事

2011/11/15 Javascript

javascript 基础篇3 类，回调函数，内置对象，事件处理

2012/03/14 Javascript

JSON传递bool类型数据的处理方式介绍

2013/09/18 Javascript

深入理解jQuery中live与bind方法的区别

2013/12/18 Javascript

js 时间格式与时间戳的相互转换示例代码

2013/12/25 Javascript

javascript中传统事件与现代事件

2015/06/23 Javascript

深入理解Java线程编程中的阻塞队列容器

2015/12/07 Javascript

vue实现简单实时汇率计算功能

2017/01/15 Javascript

详解Vue中数组和对象更改后视图不刷新的问题

2018/09/21 Javascript

浅谈redux, koa, express 中间件实现对比解析

2019/05/23 Javascript

微信小程序搜索框组件代码实例

2019/09/06 Javascript

vue+iview框架实现左侧动态菜单功能的示例代码

2020/07/23 Javascript

[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP

2016/03/06 DOTA

如何在VSCode上轻松舒适的配置Python的方法步骤

2019/10/28 Python

Python for循环搭配else常见问题解决

2020/02/11 Python

Timberland美国官网：全球领先的户外品牌

2016/08/15 全球购物

全球第二大家装零售商：Lowe’s

2018/01/13 全球购物

在线课程：Skillshare

2019/04/02 全球购物

博朗(Braun)俄罗斯官方商店：德国小家电品牌

2019/09/24 全球购物

内业资料员岗位职责

2014/01/04 职场文书

羽毛球比赛策划方案

2014/06/13 职场文书

2015年打非治违工作总结

2015/04/02 职场文书

个人工作失误的保证书怎么写？

2019/06/21 职场文书