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

让innerHTML的脚本也可以运行起来

Jul 01 Javascript

讲解JavaScript中for...in语句的使用方法

Jun 03 Javascript

javascript实现网页屏蔽Backspace事件，输入框不屏蔽

Jul 21 Javascript

jQuery 操作input中radio的技巧

Jul 18 Javascript

vuejs2.0子组件改变父组件的数据实例

May 10 Javascript

bootstrap时间控件daterangepicker使用方法及各种小bug修复

Oct 25 Javascript

Vue-cli-webpack搭建斗鱼直播步骤详解

Nov 17 Javascript

Vue按需加载的具体实现

Dec 02 Javascript

Node.js创建HTTP文件服务器的使用示例

May 11 Javascript

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

Aug 14 Javascript

js利用递归与promise 按顺序请求数据的方法

Aug 30 Javascript

在Express中提供静态文件的实现方法

Oct 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 中的一些经验积累

2006/10/09 PHP

php 中文处理函数集合

2008/08/27 PHP

Linux下安装oracle客户端并配置php5.3

2014/10/12 PHP

PHP getDocNamespaces()函数讲解

2019/02/03 PHP

基于jquery DOM写的类似微博发布的效果

2012/10/20 Javascript

checkbox使用示例

2013/08/23 Javascript

ajax与302响应代码测试

2013/10/23 Javascript

javascript实现分栏显示小技巧附图

2014/10/13 Javascript

AngularJS模块详解及示例代码

2016/08/17 Javascript

JS代码实现百度地图画圆删除标注

2016/10/12 Javascript

JS简单判断函数是否存在的方法

2017/02/13 Javascript

js获取当前周、上一周、下一周日期

2017/03/19 Javascript

解决vue单页使用keep-alive页面返回不刷新的问题

2018/03/13 Javascript

vue.js前后端数据交互之提交数据操作详解

2018/04/24 Javascript

vue.js层叠轮播效果的实例代码

2018/11/08 Javascript

vue.js实现回到顶部动画效果

2019/07/31 Javascript

详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

2020/04/27 Javascript

vue实现点击出现操作弹出框的示例

2020/11/05 Javascript

python实现向ppt文件里插入新幻灯片页面的方法

2015/04/28 Python

Python中遇到的小问题及解决方法汇总

2017/01/11 Python

python实现发送邮件及附件功能

2021/03/02 Python

python将视频转换为全字符视频

2019/04/26 Python

Python 使用list和tuple+条件判断详解

2019/07/30 Python

python tkinter图形界面代码统计工具（更新）

2019/09/18 Python

如何打包Python Web项目实现免安装一键启动的方法

2020/05/21 Python

keras训练浅层卷积网络并保存和加载模型实例

2020/07/02 Python

python中关于数据类型的学习笔记

2020/07/19 Python

Pycharm调试程序技巧小结

2020/08/08 Python

C#公司笔试题

2014/03/28 面试题

入党申请人的自我鉴定

2013/12/01 职场文书

班主任新年寄语

2014/04/04 职场文书

股东合作协议书

2014/09/12 职场文书

群众路线党员自我评议范文2014

2014/09/24 职场文书

民事诉讼代理委托书

2014/10/08 职场文书

python绘图subplots函数使用模板的示例代码

2021/04/30 Python

SQL语法CONSTRAINT约束操作详情

2022/01/18 MySQL