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 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
layui 解决form表单点击无反应的问题
Oct 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python configparser模块操作代码实例
2020/06/08 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
21岁生日感言
2014/02/27 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
年底个人总结范文
2015/03/10 职场文书
作息时间调整通知
2015/04/22 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
Golang解析JSON对象
2022/04/30 Golang