client-*,scroll-*,offset-*的区别

offsetWidth、offsetHeight   （width + padding + border + 滚动条）
offsetTop、offsetLeft     (距离父元素的距离，从父元素的padding算起，本元素的border) 即left+marginLeft

clientWidth、clientHeight (width + padding, 不包含滚动条)
clientTop、clientLeft(通常这些值就等于左边和上边的边框宽度, 即border-left-widht、border-top-width)


scrollWidth、scrollHeight （如果没有滚动条和clientWidth的一致）
scrollTop、scrollLeft 用于设置滚动条的位置

 

offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标

//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}

 

来源：https://www.cnblogs.com/luguiqing/p/11774734.html