编程 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之事件冒泡和事件捕获详细介绍

Oct 28 Javascript

在Linux上用forever实现Node.js项目自启动

Jul 09 Javascript

jQuery实现瀑布流布局详解（PC和移动端）

Sep 01 Javascript

js enter键激发事件实例代码

Aug 17 Javascript

简洁实用的BootStrap jQuery手风琴插件

Aug 31 Javascript

Vue.js每天必学之过渡与动画

Sep 06 Javascript

vue中$set的使用(结合在实际应用中遇到的坑)

Jul 10 Javascript

前端axios下载excel文件(二进制)的处理方法

Jul 31 Javascript

记录微信小程序 height: calc(xx - xx)；无效问题

Dec 30 Javascript

微信小程序scroll-view隐藏滚动条的方法详解

Mar 25 Javascript

使用 Jest 和 Supertest 进行接口端点测试实例详解

Apr 25 Javascript

Antd的Table组件嵌套Table以及选择框联动操作

Oct 24 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编程最快明白》第五讲：php目录、文件操作

2010/11/01 PHP

php-cli简介(不会Shell语言一样用Shell)

2013/06/03 PHP

基于empty函数的输出详解

2013/06/17 PHP

PHP中把有符号整型转换为无符号整型方法

2015/05/27 PHP

百万级别知乎用户数据抓取与分析之PHP开发

2015/09/28 PHP

PHP遍历目录文件的常用方法小结

2017/02/03 PHP

javascript 面向对象全新理练之继承与多态

2009/12/03 Javascript

JavaScript高级程序设计（第3版）学习笔记8 js函数（中）

2012/10/11 Javascript

尝试在让script的type属性等于text/html

2013/01/15 Javascript

关闭浏览器窗口弹出提示框并且可以控制其失效

2014/04/15 Javascript

js右下角弹出提示框示例代码

2016/01/12 Javascript

jQuery实现选项联动轮播效果【附实例】

2016/04/19 Javascript

jQuery实现圣诞节礼物动画案例解析

2016/12/25 Javascript

js上传图片预览的实现方法

2017/05/09 Javascript

Vue v2.5 调整和更新不完全问题

2017/10/24 Javascript

Vue v2.4中新增的$attrs及$listeners属性使用教程

2018/01/08 Javascript

vue router 跳转时打开新页面的示例方法

2019/07/28 Javascript

解决antd 下拉框 input [defaultValue] 的值的问题

2020/10/31 Javascript

[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28

2020/12/02 DOTA

详解Django缓存处理中Vary头部的使用

2015/07/24 Python

python enumerate函数的使用方法总结

2017/11/15 Python

Django中如何防范CSRF跨站点请求伪造攻击的实现

2019/04/28 Python

使用pytorch实现可视化中间层的结果

2019/12/30 Python

Python在线和离线安装第三方库的方法

2020/10/31 Python

celery在python爬虫中定时操作实例讲解

2020/11/27 Python

CSS3实现文字波浪线效果示例代码

2016/11/20 HTML / CSS

WatchShop法国：英国排名第一的独立手表零售商

2020/02/17 全球购物

super关键字的用法

2012/04/10 面试题

中学运动会广播稿

2014/01/19 职场文书

《飞向蓝天的恐龙》教学反思

2014/04/09 职场文书

2014年国庆节广播稿

2014/09/19 职场文书

学生旷课检讨书500字

2014/10/28 职场文书

背起爸爸上学观后感

2015/06/08 职场文书

微观世界观后感

2015/06/10 职场文书

JavaScript 语句之常用 for 循环详解

2021/03/29 Javascript

Nginx本地目录映射实现代码实例

2021/03/31 Servers