【javascript基础】之【确定元素坐标】

【javascript基础】之【确定元素坐标】

  IE、FireFox3以及更高版本和Opera9.5以及更高版本都提供了getBoundingClientRect()方法，这个方法返回一个矩形对象，left、top、right、bottom，这些属性返回的是节点相对于浏览器（0,0）坐标（节点相对于视口的位置）的位置。但IE认为文档的左上角坐标是（2,2），而FireFox Opera则将传统的（0,0）作为起点坐标，因此开始的时候，检查一下位于（0,0）的位置。

 demo:

<div id="msg" style="400px;height:400px;background:#0046a3;margin:40px;"></div>
<script type="text/javascript">

var m = document.getElementById("msg");

function offset(elem){
    if(!elem){
        throw '不是一个有效的节点';
    }
    var scrollTop = document.documentElement.scrollTop,
        scrollLeft = document.documentElement.scrollLeft,
        returnValue = null;
    if(elem.getBoundingClientRect){   //支持getBoundingClientRect
        if(typeof arguments.callee.offset !== 'number'){
            var temp = document.createElement("div");
            temp.style.cssText = "position:absolute;top:0;left:0;";
            document.body.appendChild(temp);
            arguments.callee.offset = - temp.getBoundingClientRect().top - scrollTop;   //为了防止函数调用的时候，窗口被滚动了
            document.body.removeChild(temp);
            temp = null;
        }
        var rect = elem.getBoundingClientRect(),
            offset = arguments.callee.offset;
        returnValue = {
            left : rect.left + offset,
            right : rect.right + offset,
            top : rect.top + offset,
            bottom : rect.bottom + offset
        };
    }else{                         //不支持getBoundingClientRect
        var offsetParent = elem, 
            left = 0,
            top = 0;
        while( offsetParent != null ){
            left += offsetParent.offsetLeft;
            top += offsetParent.offsetTop;
            offsetParent = elem.offsetParent;
        }
        returnValue = {
            left : left - scrollLeft,
            right : left + elem.offsetWidth - offsetLeft,
            top : top - scrollTop,
            bottom : top + elem.offsetHeight - scrollTop
        };
    }
    
    return returnValue;
}

var t = offset(m);
alert('top:' + t.top + '\n' + 'left:' + t.left + '\n' + 'right:' + t.right + '\n' + 'bottom:' + t.bottom);

</script>

 参考：javascript高级程序设计第二版