saber 酱的抱枕

Fly me to the moon

04/24
2015
学习

js中获取元素的位置

JavaScript中有获取HTML元素位置的属性:
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其父元素左上角为(0,0)点从而计算出的数值。我们可以用以下函数获得元素在页面中的绝对位置:

//获取元素的纵坐标 
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; 
} 

其原理是判断元素有父元素的话,将父元素位置的数值加起来,实现过程就是if语句后调用函数自身的那句代码。这样最终就可以得到元素距离页面顶部的绝对位置。

js中获取元素的位置