JQuery 獲得絕對,相對位置的坐標(biāo)方法
更新時間：2010年02月09日 13:33:31 作者：
獲取頁面某一元素的絕對X,Y坐標(biāo)，可以用offset()方法：（body屬性設(shè)置margin :0;padding:0;）
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>
var Y = $('#DivID').offset().left;
獲取相對(父元素)位置:
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 />");
//獲取相對(父元素)位置:
var C = $('#DivID').position().top;
var D = $('#DivID').position().left;
document.write(C+"<br />");
document.write(D);
</script>
</body>
</html>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)獲取table中鼠標(biāo)click點(diǎn)擊位置行號與列號的方法
- jQuery實(shí)時顯示鼠標(biāo)指針位置和鍵盤ASCII碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- jquery實(shí)現(xiàn)的元素的left增加N像素 鼠標(biāo)移開會慢慢的移動到原來的位置
- 為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開”的功能
- Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享
- jQuery獲得指定元素坐標(biāo)的方法
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
相關(guān)文章
jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字
這篇文章主要介紹了jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
超好用的jQuery分頁插件jpaginate用法示例【附源碼下載】
這篇文章主要介紹了超好用的jQuery分頁插件jpaginate用法,結(jié)合實(shí)例形式簡單分析了jQuery分頁插件jpaginate的基本調(diào)用方式、參數(shù)屬性及配置方法,并附帶源碼供讀者下載,需要的朋友可以參考下2018-12-12
可以設(shè)置左邊菜單項(xiàng)div的overflow-x:auto;overlfow-y:auto;這樣就會自動生成了滾動條，但是大家都知道自帶的不好看。接下來就是重點(diǎn)了，如何修改滾動條的樣式呢？感興趣的朋友可以了解下本文2013-07-07
這篇文章主要介紹了jquery登錄的異步驗(yàn)證操作,涉及jQuery針對表單提交登錄的用戶名、密碼驗(yàn)證與異步post提交相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JQuery插件ajaxfileupload.js異步上傳文件實(shí)例
這篇文章主要介紹了JQuery插件ajaxfileupload.js異步上傳文件實(shí)例,本文直接給出了HTML代碼和JS代碼以及后臺處理代碼,需要的朋友可以參考下2015-05-05
用JQUERY實(shí)現(xiàn)全選和取消全選,減少了我們寫JS的麻煩,我們再也不用寫那么多代碼了,給大家分享兩段代碼,用JQUERY實(shí)現(xiàn)復(fù)選框的全選和取消全選.2008-08-08
這篇文章主要介紹了jQuery中index()的用法分析,針對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
本文主要是使用jDialog插件實(shí)現(xiàn)的彈出框效果，代碼十分簡介，需要的小伙伴自己參考下吧。2015-04-04
本篇文章給大家詳細(xì)分析了用jquery實(shí)現(xiàn)放大鏡效果的方法，以及代碼分享，有興趣的學(xué)習(xí)下。2018-02-02