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 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
javascript基本语法分析说明
2008/06/15 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python学习入门之区块链详解
2017/07/25 Python
浅述python2与python3的简单区别
2018/09/19 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Django封装交互接口代码
2020/07/12 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
2014学年自我鉴定
2014/02/23 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
学术会议开幕词
2016/03/03 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
css弧边选项卡的项目实践
2023/05/07 HTML / CSS