编程 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 相关文章推荐

JavaScript 学习小结(适合新手参考)

Jul 30 Javascript

javascript管中窥豹形参与实参浅析

Dec 17 Javascript

JavaScript eval() 函数介绍及应用示例

Jul 29 Javascript

JavaScript中的异常捕捉介绍

Dec 31 Javascript

JS控制表单提交的方法

Jul 09 Javascript

JSONObject使用方法详解

Dec 17 Javascript

AngularJS使用ng-repeat指令实现下拉框

Aug 23 Javascript

angularjs数组判断是否含有某个元素的实例

Feb 27 Javascript

ng-events类似ionic中Events的angular全局事件

Sep 05 Javascript

koa2 用户注册、登录校验与加盐加密的实现方法

Jul 22 Javascript

小程序中this.setData的使用和注意事项

Aug 28 Javascript

vue 获取到数据但却渲染不到页面上的解决方法

Nov 19 Vue.js

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

广播爱好者需要了解的天线知识

2021/03/01 无线电

绿山咖啡和蓝山咖啡

2021/03/04 新手入门

Apache服务器无法使用的解决方法

2013/05/08 PHP

关于PHP中协程和阻塞的一些理解与思考

2017/08/11 PHP

Array.prototype.slice 使用扩展

2010/06/09 Javascript

一个简单的js渐显(fadeIn)渐隐(fadeOut)类

2010/06/19 Javascript

IE6 fixed的完美解决方案

2011/03/31 Javascript

multiSteps 基于Jquery的多步骤滑动切换插件

2011/07/22 Javascript

JavaScript实现带箭头标识的多级下拉菜单效果

2015/08/27 Javascript

JavaScript的removeChild()函数用法详解

2015/12/27 Javascript

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

2016/10/25 Javascript

微信小程序摇一摇抽奖简单实例实现代码

2017/01/09 Javascript

基于jQuery实现照片墙自动播放特效

2017/01/12 Javascript

jQuery图片轮播功能实例代码

2017/01/29 Javascript

Vue表单验证插件Vue Validator使用方法详解

2017/04/07 Javascript

20170918 前端开发周报之JS前端开发必看

2017/09/18 Javascript

Vuex的基本概念、项目搭建以及入坑点

2018/11/04 Javascript

Vue实现本地购物车功能

2018/12/05 Javascript

JSON基本语法及与JavaScript的异同实例分析

2019/01/04 Javascript

vue router 组件的高级应用实例代码

2019/04/08 Javascript

详解微信小程序开发用户授权登陆

2019/04/24 Javascript

[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局

2016/02/26 DOTA

python 设置文件编码格式的实现方法

2017/12/21 Python

Python基于百度AI的文字识别的示例

2018/04/21 Python

Python2实现的图片文本识别功能详解

2018/07/11 Python

Python XlsxWriter模块Chart类用法实例分析

2019/03/11 Python

Python爬虫 bilibili视频弹幕提取过程详解

2019/07/31 Python

使用CSS3实现一个3D相册效果实例

2016/12/03 HTML / CSS

Lookfantastic香港官网：英国知名美妆购物网站

2018/06/19 全球购物

英国电子专家：maplin

2019/09/04 全球购物

嘻哈珠宝品牌：KRKC&CO

2020/10/19 全球购物

澳大利亚家具商店：Freedom

2020/12/17 全球购物

财务简历的自我评价

2014/03/05 职场文书

优秀乡村医生先进事迹材料

2014/08/23 职场文书

中秋晚会致辞

2015/07/31 职场文书

python的变量和简单数字类型详解

2021/09/15 Python