获取元素在文档中的位置getBoundingClientRect和循环获取位置

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>