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从头学起第二讲
Jul 04 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
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数组函数
2008/08/18 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php读取3389的脚本
2014/05/06 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
javascript模块化简单解析
2016/04/07 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
Python实现数据库编程方法详解
2015/06/09 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python算法之图的遍历
2017/11/16 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python中bytes和str类型的区别
2019/10/21 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
物流专业求职计划书
2014/01/10 职场文书
承诺函格式模板
2015/01/21 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS