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