JQuery 获得绝对,相对位置的坐标方法


Posted in Javascript onFebruary 09, 2010

var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>java Test</title> 
</head> 
<style type="text/css"> 
<!-- 
body,div { margin:0; padding:0;} 
--> 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> <body> 
<div style="background:#ccc;height:300px;" onclick=""></div> 
<div style="position:relative;"> 
<div style=" position:absolute;left:50px; top:50px;" id="DivID"></div> 
</div> 
<script type="text/javascript"> 
var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left; 
document.write(X+"<br />"); 
document.write(Y+"<br />"); 
//获取相对(父元素)位置: 
var C = $('#DivID').position().top; 
var D = $('#DivID').position().left; 
document.write(C+"<br />"); 
document.write(D); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
js常用正则表达式集锦
May 17 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
javascript 解析url的search方法
Feb 09 #Javascript
toString()一个会自动调用的方法
Feb 08 #Javascript
jQuery AJAX回调函数this指向问题
Feb 08 #Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 #Javascript
You might like
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
关于this和self的使用说明
2010/08/01 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
大学生物业管理求职信
2013/10/24 职场文书
医院辞职信范文
2014/01/17 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
立春观后感
2015/06/18 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
分享Python异步爬取知乎热榜
2022/04/12 Python