DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js獲取元素相對窗口位置的實現代碼
js獲取元素相對窗口位置的實現代碼
編輯:關於JavaScript     

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

原創文章,轉載請注明: 轉載自前端開發

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved