获取html元素绝对位置,js获取元素在页面的相对/绝对位置

我们可以先用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 ｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝

然后再计算浏览器滚动条的值，2个值相加即可得到元素在页面的位置！

假如我们现在要获得元素obj在页面的左上角坐标位置，计算公式如下：

代码如下

//chrome不能识别document.documentElement用document.body兼容

var sTop=document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;

var sLeft= document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;

该obj元素在页面的Left值=obj.getBoundingClientRect().left + sLeft

该obj元素在页面的Top值=obj.getBoundingClientRect().top + sTop

注：getBoundingClientRect()方法方法之前只有ie支持，现在FF3.0+和Opera9.5+都已经支持该方法，可以说在获得页面元素位置上效率能有很大的提高！

那么我们要如何获取绝对位置呢

代码如下

function findPosX(obj) {

var curleft = 0;

if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body

while (obj.offsetParent) {//遍历所有父类元素

curleft += obj.offsetLeft;//当前元素的左边距

obj = obj.offsetParent;

}

} else if (obj.x) curleft += obj.x;

return curleft;

}

平时我用这种累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层 的办法 在实际工作中遇到一些问题 就是元素有border 时 会有问题会发生计算出的位置不是很准确的问题尤其在IE下和其他浏览器计算位置不对

下面大家可看个实例

代码如下

function getElementPos(elementId)

{

var ua = navigator.userAgent.toLowerCase();

var isOpera = (ua.indexOf('opera') != -1);

var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

var el = document.getElementById(elementId);

if(el.parentNode === null || el.style.display == 'none')

{

return false;

}

var parent = null;

var pos = [];

var box;

if(el.getBoundingClientRect)    //IE

{

box = el.getBoundingClientRect();

var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

return {x:box.left + scrollLeft, y:box.top + scrollTop};

}

else if(document.getBoxObjectFor)    // gecko

{

box = document.getBoxObjectFor(el);

var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;

var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

pos = [box.x - borderLeft, box.y - borderTop];

}

else    // safari & opera

{

pos = [el.offsetLeft, el.offsetTop];

parent = el.offsetParent;

if (parent != el)

{

while (parent)

{

pos[0] += parent.offsetLeft;

pos[1] += parent.offsetTop;

parent = parent.offsetParent;

}

}

if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))

{

pos[0] -= document.body.offsetLeft;

pos[1] -= document.body.offsetTop;

}

}

if (el.parentNode)

{

parent = el.parentNode;

}

else

{

parent = null;

}

while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')

{ // account for any scrolled ancestors

pos[0] -= parent.scrollLeft;

pos[1] -= parent.scrollTop;

if (parent.parentNode)

{

parent = parent.parentNode;

}

else

{

parent = null;

}

}

return {x:pos[0], y:pos[1]};

}

调用方法：

代码如下

var pos = getElementPos(ElementId);

pos.y   //标识距离顶部的距离

pos.x  //表示距离左边的距离