JQuery 獲得絕對,相對位置的座標方法--非常重要
獲取頁面某一元素的絕對X,Y座標,可以用offset()方法:(body屬性設定margin :0;padding:0;)
<iframe height="250" marginheight="0" src="http://pos.baidu.com/acom?adn=3&at=103&aurl=&cad=1&ccd=32&cec=gb2312&cfv=13&ch=0&col=zh-cn&conOP=0&cpa=1&dai=2&dis=0&ltr=http%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%25E8%258E%25B7%25E5%258F%2596%2520div%2520%25E7%25BB%259D%25E5%25AF%25B9%25E5%259D%2590%25E6%25A0%2587%26ie%3Dutf-8%26tn%3Dbaiduhome_pg%26f%3D8%26rsv_bp%3D1%26rsv_spt%3D3%26inputT%3D17014%26rsv_sug3%3D70%26rsv_sug4%3D8944%26rsv_sug1%3D9%26rsv_sug2%3D0%26bs%3Djquery%2520%25E7%25A7%25BB%25E5%258A%25A8div&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F22081.htm&lunum=6&n=jb51_cpr&pcs=1278x530&pis=10000x10000&ps=492x792&psr=1536x864&pss=1278x746&qn=123249acf7076e08&rad=&rsi0=300&rsi1=250&rsi5=4&rss0=%23FFFFFF&rss1=%23F7FCFF&rss2=%23006699&rss3=%23333333&rss4=%23333333&rss5=&rss6=%23e10900&rss7=&scale=&skin=&td_id=91397&tn=text_default_300_250&tpr=1407988815172&ts=1&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u91397" frameborder="0" width="300" allowtransparency="" marginwidth="0" scrolling="no" align="center,center"></iframe>
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;
複製程式碼 程式碼如下:
<!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>
相關文章
- 滑鼠滑動獲取絕對座標方法 jqueryjQuery
- js獲取div相對螢幕的座標位置JS
- android獲得控制元件在螢幕中的絕對座標Android控制元件
- 關於CSS中的定位使用子絕父相(子類絕對位置和父類相對位置)CSS
- JS改變HTML元素的絕對座標JSHTML
- Js獲取元素相對適口位置JS
- jQuery獲取滑鼠指標座標jQuery指標
- getBoundingClientRect方法獲取元素在頁面中的相對位置GCclient
- [WPF]獲取控制元件間的相對位置控制元件
- 設定/獲得游標位置
- 元素的相對定位與絕對定位
- WPF 元素相對另外一個元素的 相對位置
- jquery獲得option的值和對option進行操作jQuery
- CSS中的絕對定位與相對定位CSS
- css絕對定位和相對定位的差別CSS
- jquery position()計算的是元素所佔據位置的座標jQuery
- 檔案的相對路徑和絕對路徑以及根相對路徑
- HTML絕對路徑與相對路徑HTML
- 絕對路徑和相對路徑的區別,
- 絕對路徑和相對路徑的區別
- css中絕對定位與相對定位的區別CSS
- Qt的相對路徑轉為絕對路徑QT
- javascript獲取滑鼠指標在整個頁面中的座標位置JavaScript指標
- 根據經緯度繪製座標點相對位置(分別用php和html5實現)PHPHTML
- Java 獲取Excel分頁座標位置(單元格)JavaExcel
- 百度地圖:根據位置獲取座標地圖
- 從EBS中獲得值集對應的SQL的方法SQL
- Java 獲取Excel中圖片所在的行、列座標位置JavaExcel
- 檔案絕對路徑和相對路徑
- Jsp相對路徑和絕對路徑JS
- 對Oracle效能資料的獲得。Oracle
- 深入解析Java絕對路徑與相對路徑Java
- javascript將相對路徑修改為絕對路徑JavaScript
- 獲取元素在頁面中的座標位置程式碼例項
- 好程式設計師web分享圖片標籤、絕對路徑和相對路徑程式設計師Web
- Jquery獲取敲擊回車時游標所在的位置jQuery
- 1-相對定位、絕對定位和固定定位的區別
- web專案絕對路徑與相對路徑的問題Web