获取当前元素节点的position和宽高（兼容）

标签：

function objxy(n){
    
    var o=document.getElementById(n),x=0,y=0,w=o.offsetWidth,h=o.offsetHeight
    if(o.getBoundingClientRect)
    {
        x=o.getBoundingClientRect().left+document.body.scrollLeft
        y=o.getBoundingClientRect().top+document.body.scrollTop
    }
    else
    {
        while(o!=null && o.tagName.toUpperCase()!="BODY")
        {
            x+=o.offsetLeft
            y+=o.offsetTop
            o=o.offsetParent
        }
    }
    return [x,y,w,h]
}      

1、getBoundingClientRect： 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0，IE为2 在火狐的firebug中输入document.documentElement.clientTop就能看的返回值为0

2、scrollTop：第一个代表页面利用滚动条滚动到下方时，隐藏在滚动条上方的页面的高度

3、兼容解决 obj.offsetTop 指 obj 距离上方或上层控件的位置;利用while循环，来进行累加。offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。parentObj = element.offsetParent

4、总结

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

获取当前元素节点的position和宽高（兼容）

标签：

原文地址：http://www.cnblogs.com/yunyi1895/p/5127481.html