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>
Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
JavaScript中的高级函数
Jan 04 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
微信小程序form表单组件示例代码
Jul 15 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP操作XML作为数据库的类
2010/12/19 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python之os操作方法(详解)
2017/06/15 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python+pygame实现坦克大战
2019/09/10 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Python pip 常用命令汇总
2020/10/19 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
小学数学教学反思
2014/02/02 职场文书
元旦促销方案
2014/03/15 职场文书
党员干部一句话承诺
2014/05/30 职场文书
街道社区活动报告
2015/02/05 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
JS实现数组去重的11种方法总结
2022/04/04 Javascript
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
mysql全面解析json/数组
2022/07/07 MySQL