獲取元素在頁面中位置

1.通過元素的offsetLeft和offsetTop

var domObj = docunment.getElementById('dom');
domObj.offsetLeft;//10
domObj.offsetTop;//10

　　在這里，dom元素的offsetLeft、offsetTop指的是元素相對於其offseParent指定的坐標來說的。offsetParent：是指當前元素最近的經過定位的父級元素，如果沒有則一直向上直至body。注意當前元素為fixed時，其offsetParent的值為null。

拓展：

　　offsetWidth/offsetHeight: width+padding+border

　　clientLeft/clientTop:表示內容區域的左上角相對於整個元素左上角的位置（包括邊框）//個人理解為border值

　　clientWidth/clientHeight: width+padding

　　scrollWidth:獲取對象的滾動寬度 
　　scrollHeight: 獲取對象的滾動高度。 
　　scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 
　　scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離

　　window.screen.availHeight/window.screen.availWidth: 瀏覽器去除上方工具欄和下放菜單欄可用寬高

　　window.screen.height/window.screen.width: 屏幕寬高

2.event.clientX和event.clientY

事件相對於文檔的水平和垂直距離

3.getBoundingClientRect

var domObj = docunment.getElementById('dom');
domObj.getBoundingClientRect();

　　方法返回一個一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。