中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

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的寬度

?123456789101112 //獲取元素的縱坐標（相對于窗口） 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相關屬性少不了。那效率就成問題了。

?123456789101112 //獲取元素的縱坐標（相對于窗口） 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屬性是元素最右邊相對于窗口左邊的距離。

?12345678 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

更多信息請查看IT技術專欄