【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="width: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高級程序設計第二版