js擷取元素相對視窗位置的實現代碼，js視窗

js擷取元素相對視窗位置的實現代碼，js視窗

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

原創文章，轉載請註明： 轉載自前端開發

JS怎判斷元素相對於父視窗的絕對位置？

<div id="div_status" style="width:101px; height:102px; border:1px solid #ffff00; position:fixed; top:103px; left:104px;">xianshineirong</div>
<script type="text/javascript">
window.onload=function(){
window.alert(document.getElementById('div_status').style.left);
}
</script>
 
怎尋找網頁元素對應的JS代碼（）

是要尋找這個start（）函數體在哪裡吧？
如果是這樣的話，可以先在本頁面用ctrl+F在找下有沒有這個函數；
如果沒找到的話，就找到<head></head標籤裡看它引入了什麼js檔案，從這些js檔案裡找。
純手打，希望能幫到你