getBoundingClientRect来获取页面元素的位置
详细见：http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html
//获取页面元素的位置
function getElemPos(obj) {
if (obj.getBoundingClientRect) { // 当浏览器支持getBoundingClientRect方法时采用
var pos = obj.getBoundingClientRect();
return { x: pos.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft), y: pos.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) };
}
else {
var pos = { "top": 0, "left": 0 };
var _obj = obj;
if (obj.offsetParent) {
while (obj.offsetParent) { //循环遍历
if (_obj == obj) { //当前对象
pos.top += obj.offsetTop;
pos.left += obj.offsetLeft;
obj = obj.offsetParent;
}
else {
pos.top += obj.offsetTop + obj.clientTop; //祖先对象需加上边框
pos.left += obj.offsetLeft + obj.clientLeft;
obj = obj.offsetParent;
}
}
} else if (obj.x) {
pos.left += obj.x;
} else if (obj.x) {
pos.top += obj.y;
}
return { x: pos.left, y: pos.top };
}
}
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 *{margin: 0px;padding-bottom: 0px;padding-left: 0px; padding-right: 0px;padding-top: 0px;}
7 body{height: 1000px;}
8 .main{left: 100px;top: 30px;position: relative;width: 500px;height: 300px;background-color: Orange;}
9 .bigcont{position: absolute;left: 50;top: 50px;width: 160px;height: 160px;border: 10px solid blue;padding: 10px;}
10 .mdiv{left: 50px;top: 50px;border: 5px solid red;padding: 10px;width: 100px;height: 100px;position: absolute;}
11 .mtxt{left: 100px;top: 0px;position: relative;width: 500px;height: auto;background-color: Orange;text-align: center;}
12 </style>
13 <script type="text/javascript">
14 window.onload = function () {
15 var mdiv = document.getElementById("mdiv");
16 var mtxt = document.getElementById("mtxt");
17
18 function getElemPos(obj) {
19 if (obj.getBoundingClientRect) { // 当浏览器支持getBoundingClientRect方法时采用
20 var pos = obj.getBoundingClientRect();
21 return { x: pos.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
22 y: pos.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop)
23 };
24 }
25 else {
26 var pos = { "top": 0, "left": 0 };
27 var _obj = obj;
28 if (obj.offsetParent) {
29 while (obj.offsetParent) { //循环遍历
30 if (_obj == obj) { //当前对象
31 pos.top += obj.offsetTop;
32 pos.left += obj.offsetLeft;
33 obj = obj.offsetParent;
34 }
35 else {
36 pos.top += obj.offsetTop + obj.clientTop; //祖先对象需加上边框
37 pos.left += obj.offsetLeft + obj.clientLeft;
38 obj = obj.offsetParent;
39 }
40 }
41 } else if (obj.x) {
42 pos.left += obj.x;
43 } else if (obj.x) {
44 pos.top += obj.y;
45 }
46 return { x: pos.left, y: pos.top };
47 }
48 }
49
50 mtxt.innerHTML = getElemPos(mdiv).x + "" + getElemPos(mdiv).y;
51 }
52 </script>
53 </head>
54 <body>
55 <div class="main">
56 <div class="bigcont">
57 <div id="mdiv" class="mdiv">
58 </div>
59 </div>
60 </div>
61 <div id="mtxt" class="mtxt">
62 </div>
63 </body>
64 </html>