确定元素位置及大小的

1. 偏移量：介绍偏移量前，首先说说元素在屏幕上所占用的空间，而占用的空间由其高度、宽度确定，包括所有的内边距、滚动条和边框大小。

• offsetWidth：元素在水平方向上占用的空间大小。
• offsetHeight：元素在垂直方向上占用的空间大小。
• offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
• offsetTop：元素的上外边框至包含元素的上外边框之间的像素距离。

根据元素的offsetLeft、offsetTop，及可以计算出该元素在页面上的偏移量了：

// 获取元素的左偏移量
function getElementLeft(element){
    var left = element.offsetLeft;
    var current = element.offsetParent;
    while(current !== null){
        left += current.offsetLeft;
        current = current.offsetParent;        
    }
    return left;  
}
// 获取元素的上偏移量
function getElementLeft(element){
    var top = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null){
        top += current.offsetTop;
        current = current.offsetParent;        
    }
    return top;  
}

2. 客户区大小：指元素内容及其内边距所占据的空间大小。

• clientWidth：元素内容区宽度加左右内边距宽度。
• clientHeight：元素内容区高度加上下内边距宽度。

3. 滚动大小：包含滚动内容的元素大小。

• scrollHeight：没有滚动条的情况下，元素内容的总高度。
• scrollWidth：没有滚动条的情况下，元素内容的总宽度。
• scrollLeft：被隐藏的内容区域左侧的像素数（通过设置这个属性可以改变元素的滚动位置）。
• scrollTop：被隐藏的内容区域上方的像素数（通过设置这个属性可以改变元素的滚动位置）。

4. 确定元素的大小

现在的浏览器为元素提供一个方法：getBoundingClientRect。这个方法返回一个对象，包含4个属性：left,top,right,bottom。及标识出了元素在页面中的视口位置。

但是浏览器的实现稍有不同，IE8及以前版本叫(2,2)做为其实坐标，其他浏览器则为(0,0)，所以在检查位于(0,0)位置的元素时，IE8及以前版本会返回(2,2)，其他浏览器返回(0,0)。

function(element){
    if(typeof arguments.callee.offset != "number"){
        var scrollTop  = document.documentElement.scrollTop;
        var temp = document.createElement("div");
        temp.style.cssText = "position: absolute;left: 0;top: 0;";
        document.body.append(temp);
        arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
        document.body.removeChild(temp);
        temp = null;
    }
    var rect = element.getBoundingClientRect();
    var offset = arguments.callee.offset;
    return {
        left: rect.left + offset,
        right: rect.right + offset,
        top: rect.top + offset,
        bottom: rect.bottom + offset
    };
}

这个函数使用它自身的属性，来确定是否要对坐标进行调整。第一步是检测属性是否定义，如果没有就定义一个。最后offset会被设置为新元素上坐标的负值，实际上就是在IE中设置为-2，在其他浏览器中设置为-0，为此需要一个临时的元素，将其位置设置为(0,0)，然后再调用其getBoundingClient方法，之所以要减去视口的scrollTop，是为了防止调用这个函数时窗口被滚动了。