JS獲取元素的offsetTop,offsetLeft等屬性
obj.clientWidth?//獲取元素的寬度(width+padding)
obj.clientHeight?//元素的高度
obj.offsetLeft?//元素相對(duì)于父元素的left
obj.offsetTop?//元素相對(duì)于父元素的top
obj.offsetWidth?//元素的寬度(width+padding+border)
obj.offsetHeight?//元素的高度

//獲取元素的縱坐標(biāo)(相對(duì)于窗口)

function getTop(e){

var offset=e.offsetTop;

if(e.offsetParent!=null) offset+=getTop(e.offsetParent);

return offset;

}

//獲取元素的橫坐標(biāo)(相對(duì)于窗口)

function getLeft(e){

var offset=e.offsetLeft;

if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);

return offset;

}

上面的方法無疑影響性能，好在瀏覽器給我提供了相應(yīng)的接口getBoundingClientRect，這個(gè)方法最早出現(xiàn)在IE瀏覽器中，后來的瀏覽器也跟著支持了這個(gè)方法，而且還更加完善，IE中只能獲取到元素的left,top,bottom,right的屬性，而后面的現(xiàn)代瀏覽器還能獲取到元素的width和height.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

這里要注意的是，bottom是元素底部相對(duì)于窗口頂部的距離，而不是像css里面position的bottom相對(duì)于窗口底部，同理，rihgt屬性是元素最右邊相對(duì)于窗口左邊的距離。

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

總結(jié)

以上是生活随笔為你收集整理的JS获取元素在页面的位置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。