JS取得元素的offsetTop,offsetLeft等屬性
obj.clientWidth //取得元素的寬度
obj.clientHeight //元素的高度
obj.offsetLeft //元素相對於父元素的left
obj.offsetTop //元素相對於父元素的top
obj.offsetWidth //元素的寬度
obj.offsetHeight //元素的高度
區別：
clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = width padding border
offset比client多了border的寬度
//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}之前也寫過一篇JS關於取得元素位置的文章：JS取得元素的offsetTop,offsetLeft等屬性，我們可以透過offsetTop和offsetLeft屬性取得元素相對視窗的位置，但offsetTop和offsetLeft屬性都是相對於父元素定位的，而通常需要取得位置的元素都不是在最外層，所以遍歷上級元素的offset相關屬性少不了。那效率就成問題了。
//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
好在瀏覽器給我提供了相應的接口getBoundingClientRect，這個方法最早出現在IE瀏覽器中，後來的瀏覽器也跟著支持了這個方法，而且還更加完善，IE中只能獲取到元素的left,top,bottom,right的屬性，而後面的現代瀏覽器還能取得到元素的width和
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (Yes) | 4.0 |
這裡要注意的是，bottom是元素底部相對於視窗頂部的距離，而不是像css裡面position的bottom相對於視窗底部，同理，rihgt屬性是元素最右邊相對於視窗左邊的距離。
var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
"left:"+pos.left +
"bottom:"+pos.bottom +
"right:"+pos.right +
"width:"+pos.width +
"height:"+pos.height原創文章，轉載請註明： 轉載自前端開發
