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  //表示距离左边的距离

时间： 2024-10-28 13:20:18

js获取元素在页面的相对/绝对位置的相关文章

js 获取元素在页面上的偏移量的方法汇总_javascript技巧

使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP

js获取元素在浏览器中的绝对位置_javascript技巧

JavaScript中提供获取HTML元素位置的属性: HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值.那么如何得到一个HTML元素的绝对位置呢,可以用以下函数: 复制代码 代码如下: //获取元素的纵坐标 function getTop(e){ var o

js获取元素的外链样式的简单实现方法_javascript技巧

一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样

js获取元素外链样式的方法_javascript技巧

本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

js 获取元素下面所有li的两种方法_javascript技巧

js 获取元素下面所有的li 复制代码 代码如下: var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li"); 或 复制代码 代码如下: var div=document.getElementById('a'); var ul

js获取元素相对窗口位置的实现代码_javascript技巧

JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别: clientWidth = width + padding clientHeight = height + p

js 获取元素所有兄弟节点的实现方法_javascript技巧

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

简单的JS获取元素样式属性值的方法

简单的js获取元素样式属性值的方法 function attrstyle(elem,attr){  if(elem.style[attr]){   //若样式存在于html中,优先获取   return elem.style[attr];  }else if(elem.currentstyle){   //ie下获取css教程属性最终样式(同于css优先级)   return elem.currentstyle[attr];  }else if(document.defaultview &&

原生JS获取元素集合的子元素宽度实例_javascript技巧

有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. HTML结构: <ul class="itemCon"> <li class="item"> <div class="leftMess"> <div class="leftCon">