js获取元素在页面的相对/绝对位置
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 在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 //表示距离左边的距离 |
