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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JavaScript实现随机点名器
Mar 25 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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php header函数的常用http头设置
2015/06/25 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python多线程http下载实现示例
2013/12/30 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
python计算导数并绘图的实例
2020/02/29 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
python如何实时获取tcpdump输出
2020/09/16 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
个人合作协议范本
2015/08/06 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
python实现层次聚类的方法
2021/11/01 Python
python manim实现排序算法动画示例
2022/08/14 Python