编程 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子页面获取父页面数据示例

May 15 Javascript

js遍历子节点子元素附属性及方法

Aug 19 Javascript

js比较日期大小的方法

May 12 Javascript

Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态

Nov 26 Javascript

jQuery图片轮播插件——前端开发必看

May 31 Javascript

JS封装的选项卡TAB切换效果示例

Sep 20 Javascript

基于Bootstrap框架菜鸟入门教程(推荐)

Sep 17 Javascript

webpack 4.0.0-beta.0版本新特性介绍

Feb 10 Javascript

angular 服务随记小结

May 06 Javascript

微信小程序实现弹出菜单动画

Jun 21 Javascript

微信小程序自定义复选框实现代码实例

Sep 04 Javascript

Vue 中使用 typescript的方法详解

Feb 17 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

php中批量替换文件名的实现代码

2011/07/20 PHP

php中使用redis队列操作实例代码

2013/02/07 PHP

php全局变量和类配合使用深刻理解

2013/06/05 PHP

phpMyAdmin自动登录和取消自动登录的配置方法

2014/05/12 PHP

php输出xml必须header的解决方法

2014/10/17 PHP

php遍历类中包含的所有元素的方法

2015/05/12 PHP

php实现压缩合并js的方法【附demo源码下载】

2016/09/22 PHP

Jquery 扩展方法

2010/05/06 Javascript

JavaScript 判断指定字符串是否为有效数字

2010/05/11 Javascript

javascript学习笔记（五）正则表达式

2011/04/08 Javascript

在IE 浏览器中使用 jquery的fadeIn() 效果英文字符字体加粗

2011/06/02 Javascript

JS 实现导航栏悬停效果

2013/09/23 Javascript

判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

2013/11/07 Javascript

NodeJS学习笔记之MongoDB模块

2015/01/13 NodeJs

微信 java 实现js-sdk 图片上传下载完整流程

2016/10/21 Javascript

IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

2016/10/25 Javascript

JavaScript 中的 this 简单规则

2017/09/19 Javascript

puppeteer实现html截图的示例代码

2019/01/10 Javascript

react quill中图片上传由默认转成base64改成上传到服务器的方法

2019/10/30 Javascript

如何检测JavaScript中的死循环示例详解

2020/08/30 Javascript

vue-calendar-component 封装多日期选择组件的实例代码

2020/12/04 Vue.js

修改NPM全局模式的默认安装路径的方法

2020/12/15 Javascript

Python随机生成一个6位的验证码代码分享

2015/03/24 Python

Python实现简单的代理服务器

2015/07/25 Python

Python3 适合初学者学习的银行账户登录系统实例

2017/08/08 Python

Python实现判断字符串中包含某个字符的判断函数示例

2018/01/08 Python

PyTorch的自适应池化Adaptive Pooling实例

2020/01/03 Python

Python实现鼠标自动在屏幕上随机移动功能

2020/03/14 Python

MATLAB数学建模之画图汇总

2020/07/16 Python

Under Armour美国官网：美国知名高端功能性运动品牌

2016/09/05 全球购物

给分销商的致歉信

2014/01/14 职场文书

党员先进事迹材料

2014/12/19 职场文书

2015年校务公开工作总结

2015/05/26 职场文书

国庆节新闻稿

2015/07/17 职场文书

2019已经过半，你知道年中工作总结该怎么写吗？

2019/07/03 职场文书

MySQL中的隐藏列的具体查看

2021/09/04 MySQL