JQuery 获得绝对,相对位置的坐标方法--非常重要

最新推荐文章于 2021-10-09 15:29:13 发布

静山晚风

最新推荐文章于 2021-10-09 15:29:13 发布

阅读量1.2k

点赞数

分类专栏： Jquery JavaScript

Jquery 同时被 2 个专栏收录

96 篇文章 0 订阅

订阅专栏

JavaScript

66 篇文章 0 订阅

订阅专栏

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;）

style="POSITION: absolute; TOP: 0px; LEFT: 0px" id="aswift_0" height="250" marginheight="0" frameborder="0" width="300" allowtransparency="" name="aswift_0" marginwidth="0" scrolling="no" allowfullscreen="true">

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">

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;" οnclick=""></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>

静山晚风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 获得绝对,相对位置的坐标方法--非常重要

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;） var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top;
复制链接

扫一扫

专栏目录