JavaScript 获取页面元素的offset值代码

js获取方法。

代码如下	复制代码
document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;

用IETester和FireFox再测试下，IE6+下都可以，如以前一样，写出的纯js的方法无情地被FireFox鄙视了，获取的值不正确。

网上再查了下，发现应该这样写，通过循环，层层向上计算，最后得到准确的offset值。

js获取网页控件的offset值的方法

代码如下

复制代码

//Colour pallete top offset
function getOffsetTop(elm) {
    var mOffsetTop = elm.offsetTop;
    var mOffsetParent = elm.offsetParent;
    while(mOffsetParent) {
        mOffsetTop += mOffsetParent.offsetTop;
        mOffsetParent = mOffsetParent.offsetParent;
    }
    return mOffsetTop;
}

//Colour pallete left offset
function getOffsetLeft(elm) {
    var mOffsetLeft = elm.offsetLeft;
    var mOffsetParent = elm.offsetParent;
    while(mOffsetParent) {
        mOffsetLeft += mOffsetParent.offsetLeft;
        mOffsetParent = mOffsetParent.offsetParent;
    }
    return mOffsetLeft;
} function ie_y(e) {
    var t=e.offsetTop;
    while(e=e.offsetParent) {
        t+=e.offsetTop;
    }
    return t;
}
function ie_x(e) {
    var l=e.offsetLeft;
    while(e=e.offsetParent) {
        l+=e.offsetLeft;
    }
    return l;
}

jQuery的实现

再细一步去查相关问题时发现jQuery中已经包含了实现此功能的函数：offset()，很好地兼容了各浏览器。

代码如下	复制代码
$("#Button").offset().left

个人更喜欢使用jquery这个功能了，因为代码简单明了哦，兼容性强。

补充：网页制作,js教程