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 相关文章推荐
jquery 元素相对定位代码
Oct 15 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
JavaScript实现两个数组的交集
Mar 25 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python实现的计数排序算法示例
2017/11/29 Python
简单了解python模块概念
2018/01/11 Python
windows下python和pip安装教程
2018/05/25 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python plotly绘制直方图实例详解
2019/07/22 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
初三物理教学反思
2014/01/21 职场文书
国家助学金获奖感言
2014/01/31 职场文书
写字楼租赁意向书
2014/07/30 职场文书
医德考评自我评价
2014/09/14 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
MySQL常见优化方案汇总
2022/01/18 MySQL