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

Open and Print a Word Document

Jun 15 Javascript

JavaScript Sort 表格排序

Oct 31 Javascript

jQuery.prop() 使用详解

Jul 19 Javascript

json+jQuery实现的无限级树形菜单效果代码

Aug 27 Javascript

jQuery实现的仿百度分页足迹效果代码

Oct 30 Javascript

原生js实现移动端瀑布流式代码示例

Dec 18 Javascript

微信小程序getPhoneNumber获取用户手机号

Sep 29 Javascript

解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

Nov 08 Javascript

微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

May 10 Javascript

十分钟教你上手ES2020新特性

Feb 12 Javascript

基于vue+echarts数据可视化大屏展示的实现

Dec 25 Vue.js

VUE中的v-if与v-show区别介绍

Mar 13 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

php while循环得到循环次数

2013/10/26 PHP

浅谈PHP eval()函数定义和用法

2016/06/21 PHP

Jquery 实现Tab效果思路是js思路

2010/03/02 Javascript

jquery关于图形报表的运用实现代码

2011/01/06 Javascript

Jquery Ajax请求代码(2)

2011/01/07 Javascript

open 动态修改img的onclick事件示例代码

2013/11/13 Javascript

jQuery使用fadeout实现元素渐隐效果的方法

2015/03/27 Javascript

jquery实现不包含当前项的选择器实例

2015/06/25 Javascript

最新最热最实用的15个jQuery插件汇总

2015/07/05 Javascript

jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

2015/09/14 Javascript

JAVASCRIPT代码编写俄罗斯方块网页版

2015/11/26 Javascript

JavaScript的this关键字的理解

2016/06/18 Javascript

学习vue.js中class与style绑定

2016/12/03 Javascript

基于VUE选择上传图片并页面显示（图片可删除）

2017/05/25 Javascript

如何抽象一个Vue公共组件

2017/10/17 Javascript

微信小程序上传图片到服务器实例代码

2017/11/07 Javascript

详解Node 定时器

2018/02/26 Javascript

Vue三种常用传值示例(父传子、子传父、非父子)

2018/07/24 Javascript

如何根据业务封装自己的功能组件

2019/04/19 Javascript

JS实现TITLE悬停长久显示效果完整示例

2020/02/11 Javascript

python类继承与子类实例初始化用法分析

2015/04/17 Python

python3抓取中文网页的方法

2015/07/28 Python

Python MD5加密实例详解

2017/08/02 Python

PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例

2019/06/19 Python

TensorFlow车牌识别完整版代码（含车牌数据集）

2019/08/05 Python

python logging.basicConfig不生效的原因及解决

2020/02/20 Python

深度学习入门之Pytorch 数据增强的实现

2020/02/26 Python

python通用数据库操作工具 pydbclib的使用简介

2020/12/21 Python

大学迎新晚会主持词

2014/03/24 职场文书

安全生产月演讲稿

2014/05/09 职场文书

毕业生代领毕业材料的授权委托书

2014/09/29 职场文书

学习保证书

2015/01/17 职场文书

大学宣传委员竞选稿

2015/11/19 职场文书

网络研修心得体会

2016/01/08 职场文书

某某幼儿园的教育教学管理调研分析报告

2019/11/29 职场文书

Windows Server 2016 配置 IIS 的详细步骤

2022/04/28 Servers