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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
js+css实现打字效果
Jun 24 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
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
PHP4中session登录页面的应用
2008/07/25 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php获取远程文件内容的函数
2015/11/02 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
javascript中强制执行toString()具体实现
2013/04/27 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python中用max()方法求最大值的介绍
2015/05/15 Python
Unicode和Python的中文处理
2017/03/19 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python创建字典的八种方式
2019/02/27 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
祖国在我心中的演讲稿
2014/05/04 职场文书