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 相关文章推荐
jquery.cookie用法详细解析
Dec 18 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript常用的方法整理
Aug 20 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
JavaScript多种图形实现代码实例
Jun 28 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jquery 常用操作方法
2010/01/28 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
pandas值替换方法
2018/07/10 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
运动会加油稿100字
2014/09/19 职场文书
2014年图书室工作总结
2014/12/09 职场文书
项目合作意向书
2015/05/08 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python