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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 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连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
销售总监工作职责
2013/11/21 职场文书
建筑项目策划书
2014/01/13 职场文书
运动会广播稿60字
2014/01/15 职场文书
阳光体育活动总结
2014/04/30 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
初中教师业务学习材料
2014/05/12 职场文书
七夕情人节促销方案
2014/06/07 职场文书
受伤赔偿协议书
2014/09/24 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫