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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
react中的DOM操作实现
Jun 30 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python的print用法示例
2014/02/11 Python
python遍历类中所有成员的方法
2015/03/18 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python 调试冷知识(小结)
2019/11/11 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
c++工程师面试问题
2013/08/04 面试题
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
校园公益广告语
2014/03/13 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
公司合并协议书范本
2014/09/30 职场文书
承诺书模板大全
2015/05/04 职场文书