JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法

更新時(shí)間：2010年02月09日 13:33:31 作者：

獲取頁(yè)面某一元素的絕對(duì)X,Y坐標(biāo)，可以用offset()方法：（body屬性設(shè)置margin :0;padding:0;）

var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
獲取相對(duì)(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;

復(fù)制代碼代碼如下:

 
<!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 />"); 
//獲取相對(duì)(父元素)位置: 
var C = $('#DivID').position().top; 
var D = $('#DivID').position().left; 
document.write(C+"<br />"); 
document.write(D); 
</script> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery過(guò)濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字
這篇文章主要介紹了jQuery過(guò)濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
超好用的jQuery分頁(yè)插件jpaginate用法示例【附源碼下載】
這篇文章主要介紹了超好用的jQuery分頁(yè)插件jpaginate用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery分頁(yè)插件jpaginate的基本調(diào)用方式、參數(shù)屬性及配置方法,并附帶源碼供讀者下載,需要的朋友可以參考下
2018-12-12
利用div+jquery自定義滾動(dòng)條樣式的2種方法
可以設(shè)置左邊菜單項(xiàng)div的overflow-x:auto;overlfow-y:auto;這樣就會(huì)自動(dòng)生成了滾動(dòng)條，但是大家都知道自帶的不好看。接下來(lái)就是重點(diǎn)了，如何修改滾動(dòng)條的樣式呢？感興趣的朋友可以了解下本文
2013-07-07
jquery登錄的異步驗(yàn)證操作示例
這篇文章主要介紹了jquery登錄的異步驗(yàn)證操作,涉及jQuery針對(duì)表單提交登錄的用戶名、密碼驗(yàn)證與異步post提交相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
JQuery插件ajaxfileupload.js異步上傳文件實(shí)例
這篇文章主要介紹了JQuery插件ajaxfileupload.js異步上傳文件實(shí)例,本文直接給出了HTML代碼和JS代碼以及后臺(tái)處理代碼,需要的朋友可以參考下
2015-05-05
JQUERY復(fù)選框CHECKBOX全選,取消全選
用JQUERY實(shí)現(xiàn)全選和取消全選,減少了我們寫(xiě)JS的麻煩,我們?cè)僖膊挥脤?xiě)那么多代碼了,給大家分享兩段代碼,用JQUERY實(shí)現(xiàn)復(fù)選框的全選和取消全選.
2008-08-08
jQuery中index()的用法分析
這篇文章主要介紹了jQuery中index()的用法分析,針對(duì)API示例進(jìn)行分析,給出了改進(jìn)方法的實(shí)例,需要的朋友可以參考下
2014-09-09
jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能的相關(guān)資料,需要的朋友可以參考下
2017-06-06
使用jquery制作彈出框效果
本文主要是使用jDialog插件實(shí)現(xiàn)的彈出框效果，代碼十分簡(jiǎn)介，需要的小伙伴自己參考下吧。
2015-04-04
實(shí)現(xiàn)jquery放大鏡的兩種方法
本篇文章給大家詳細(xì)分析了用jquery實(shí)現(xiàn)放大鏡效果的方法，以及代碼分享，有興趣的學(xué)習(xí)下。
2018-02-02