编程 Javascript

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性能

Feb 24 Javascript

jQuery DOM删除节点操作指南

Mar 03 Javascript

JS实现网页右侧带动画效果的伸缩窗口代码

Oct 29 Javascript

js性能优化技巧

Nov 29 Javascript

原生js实现百叶窗效果及原理介绍

Apr 12 Javascript

BootStrapValidator校验方式

Dec 19 Javascript

zTree实现节点修改的实时刷新功能

Mar 20 Javascript

JS 设置Cookie 有效期检测cookie

Jun 15 Javascript

jQuery插件Validation表单验证详解

May 26 jQuery

JS实现数组的增删改查操作示例

Aug 29 Javascript

vue forEach循环数组拿到自己想要的数据方法

Sep 21 Javascript

jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】

May 17 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