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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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动态生成VRML网页
2006/10/09 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP连接access数据库
2015/03/27 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python 第一步 hello world
2009/09/25 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
浅析Python面向对象编程
2020/07/10 Python
GWT的应用有哪两种部署模式
2012/12/21 面试题
行政助理求职自荐信
2013/10/26 职场文书
集体婚礼策划方案
2014/02/22 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
盲山观后感
2015/06/11 职场文书
2016年五一促销广告语
2016/01/28 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
vue 给数组添加新对象并赋值
2022/04/20 Vue.js