原生JS获取元素位置

xianstudy JavaScript 2015-03-13 970 0 json 定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取元素在页面中的位置</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            #box{ position: absolute; top: 70px; left: 30px; width: 300px; height: 500px; background: #E84A7E;}
            #son{ position: absolute; top: -10px; left: -10px; width: 100px; height: 100px; background: #000033;}
        </style>
        <script type="text/javascript">
            window.onload = function(){
                function getPos(obj){
                    var l = 0;
                    var t = 0;
                    while(obj){
                        l+=obj.offsetLeft;
                        t+=obj.offsetTop;
                        obj = obj.offsetParent;
                    }
                    return {"left":l,"top":t}
                }
                var oDiv = document.getElementById("box");
                var oSon = document.getElementById("son");
                var json = getPos(oSon);
                console.log(json);
            }
        </script>
    </head>
    <body>
    <div id="box">
        <div id="son"></div>
    </div>
    </body>
</html>

返回结果：Object { left=20, top=60}