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

jQuery判断checkbox是否选中的小例子

Dec 02 Javascript

JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

Mar 13 Javascript

jQuery延迟加载图片插件Lazy Load使用指南

Mar 25 Javascript

分享jQuery插件的学习笔记

Jan 14 Javascript

关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

Jun 13 Javascript

jQuery中的on与bind绑定事件区别实例详解

Feb 28 Javascript

jQuery滚动插件scrollable.js用法分析

May 25 jQuery

使用js获取伪元素的content实例

Oct 24 Javascript

Vue项目中设置背景图片方法

Feb 21 Javascript

Node.js中的cluster模块深入解读

Jun 11 Javascript

JS使用H5实现图片预览功能

Sep 30 Javascript

Vue中强制组件重新渲染的正确方法

Jan 03 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

destoon在各个服务器下设置URL Rewrite(伪静态)的方法

2014/06/21 Servers

PHP延迟静态绑定示例分享

2014/06/22 PHP

URI、URL和URN之间的区别与联系

2006/12/20 Javascript

js 获取Listbox选择的值的代码

2010/04/15 Javascript

jquery实现根据浏览器窗口大小自动缩放图片的方法

2015/07/17 Javascript

高效利用Angular中内置服务$http、$location等

2016/03/22 Javascript

Js动态设置rem来实现移动端字体的自适应代码

2016/10/14 Javascript

Vue.js常用指令汇总（v-if、v-for等）

2016/11/03 Javascript

vue项目中做编辑功能传递数据时遇到问题的解决方法

2016/12/19 Javascript

基于vue.js中事件修饰符.self的用法(详解)

2018/02/23 Javascript

Node.js爬取豆瓣数据实例分析

2018/03/05 Javascript

vue.js通过路由实现经典的三栏布局实例代码

2018/07/08 Javascript

React 无状态组件(Stateless Component) 与高阶组件

2018/08/14 Javascript

vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

2018/08/25 Javascript

解决angularJS中input标签的ng-change事件无效问题

2018/09/13 Javascript

js异步上传多张图片插件的使用方法

2018/10/22 Javascript

[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22

2020/11/24 DOTA

Python实现从url中提取域名的几种方法

2014/09/26 Python

python xlsxwriter库生成图表的应用示例

2018/03/16 Python

深入浅析Python的类

2018/06/22 Python

Python模拟简单电梯调度算法示例

2018/08/20 Python

使用Python机器学习降低静态日志噪声

2018/09/29 Python

python爬虫URL重试机制的实现方法(python2.7以及python3.5)

2018/12/18 Python

详解django实现自定义manage命令的扩展

2019/08/13 Python

用python的turtle模块实现给女票画个小心心

2019/11/23 Python

Python使用os.listdir和os.walk获取文件路径

2020/05/21 Python

Android Q之气泡弹窗的实现示例

2020/06/23 Python

Python3.8安装Pygame教程步骤详解

2020/08/14 Python

pytorch使用horovod多gpu训练的实现

2020/09/09 Python

html2canvas截图空白问题的解决

2020/03/24 HTML / CSS

团队经理竞聘书

2014/03/31 职场文书

2014年实习生工作总结

2014/11/27 职场文书

民事和解协议书格式

2014/11/29 职场文书

2015年信访工作总结

2015/04/07 职场文书

2015年幼儿园大班工作总结

2015/04/25 职场文书

MySQL系列之十一日志记录

2021/07/02 MySQL