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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
js单例模式详解实例
Nov 21 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jQuery中extend函数详解
Feb 13 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
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 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
jquery json 实例代码
2010/12/02 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Django实现表单验证
2018/09/08 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
学校大课间活动方案
2014/01/30 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
护理专业求职信
2014/06/15 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
大学辅导员述职报告
2015/01/10 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python