JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
更新時(shí)間:2010年02月09日 13:33:31 作者:
獲取頁面某一元素的絕對(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;
<!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>
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>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)獲取table中鼠標(biāo)click點(diǎn)擊位置行號(hào)與列號(hào)的方法
- jQuery實(shí)時(shí)顯示鼠標(biāo)指針位置和鍵盤ASCII碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- jquery實(shí)現(xiàn)的元素的left增加N像素 鼠標(biāo)移開會(huì)慢慢的移動(dòng)到原來的位置
- 為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插件HighCharts繪制簡單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D折線圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制折線圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03探討在JQuery和Js中,如何讓ajax執(zhí)行完后再繼續(xù)往下執(zhí)行
查了不少資料,最后,還是jquery指南的書上找到了詳細(xì)的參數(shù)(async: false,),做好后,示例代碼放上,如下所示,需要的朋友可以參考下2013-07-07JQuery復(fù)選框全選效果如何實(shí)現(xiàn)
這篇文章主要介紹了JQuery復(fù)選框全選效果如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05