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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
es6中reduce的基本使用方法
Sep 10 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
php cli 小技巧
2013/06/03 PHP
php中文验证码实现示例分享
2014/01/12 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python功能键的读取方法
2015/05/28 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python温度转换华氏温度实现代码
2020/12/06 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
应届生体育教师自荐信
2013/10/03 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
中药专业自荐信范文
2014/03/18 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
信仰观后感
2015/06/03 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js