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實現(xiàn)獲取table中鼠標(biāo)click點擊位置行號與列號的方法
- jQuery實時顯示鼠標(biāo)指針位置和鍵盤ASCII碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- jquery實現(xiàn)的元素的left增加N像素 鼠標(biāo)移開會慢慢的移動到原來的位置
- 為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開”的功能
- Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實現(xiàn)代碼分享
- jQuery獲得指定元素坐標(biāo)的方法
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- jQuery實現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
相關(guān)文章
jQuery插件HighCharts繪制簡單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D折線圖效果,結(jié)合完整實例形式分析了jQuery使用HighCharts插件繪制折線圖的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03探討在JQuery和Js中,如何讓ajax執(zhí)行完后再繼續(xù)往下執(zhí)行
查了不少資料,最后,還是jquery指南的書上找到了詳細的參數(shù)(async: false,),做好后,示例代碼放上,如下所示,需要的朋友可以參考下2013-07-07