您的位置：首页 > Web前端 > JQuery

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

2014-08-14 12:00 573 查看

获取页面某一元素的绝对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">



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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航