element对象

一、offset、client、scroll

clientWidth，clientHeight，clientLeft，clientTop；
offsetWidth，offsetHeight，offsetLeft，offsetTop，offsetParent；
scrollWidth，scrollHeight，scrollLeft，scrollTop。

二、clientWidth、offsetWidth、scrollWidth的区别

// 网页总高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight

// 视口高度
window.innerHeight // 包括滚动条
document.documentElement.clientHeight // 不包括滚动条

1、元素内容的可视区的宽度，不包含滚动条边线和border，只包含width、padding，会随元素显示大小的变化而改变。

clientWidth = padding + width; 

2、元素整体的实际宽度，包含滚动条边线，border、width、padding，会随元素显示大小的变化而改变。

offsetWidth = padding + width + border; 

3、元素的实际内容的宽度，不包含滚动条边线，包含width、padding及溢出内容，会随元素中内容超过可视区后而变大。

scrollWidth = padding + 包含内容的完全宽度; 

4、元素内容不超过可视区时，无滚动条。

clientWidth = scrollWidth

5、元素内容超过可视区时，有滚动条。

clientWidth < scrollWidth

element.scrollHeight - element.scrollTop === element.clientHeight
//滚动到内容底部时，上面等式为true；
//没有滚动到内容底部时，上面等式为false；
//判断用户是否滚动到了区块的底部。

三、clientTop、offsetTop、scrollTop的区别

元素的边框厚度，距离父元素的高度，滚动的高度。

//整个网页滚动的垂直距离
document.documentElement.scrollTop

获取元素到顶部的距离用offsetTop，有时并不准确，可以用getBoundingClientRect()，用法如下：

function getRect(oDiv){
  var rect = oDiv.getBoundingClientRect();
  var top = document.documentElement.clientTop;
  var left = document.documentElement.clientLeft;
  //兼容IE
  return{
    top: rect.top - top,
    bottom: rect.bottom - top,
    left: rect.left-left,
    right: rect.right - left
  }
}
var obj = GetRect(oDiv);
console.log(obj.top); //元素上边到视图顶部的距离
console.log(obj.left); //元素左边到视图左部的距离
console.log(obj.bottom); //元素下边到视图顶部的距离
console.log(obj.right); //元素右边到视图左部的距离

四、elem.offsetTop和elem.style.top的区别
elem.offsetTop和elem.style.top都可以获得HTML元素距离上方或外层元素的位置。
1、返回值不同

elem.offsetTop返回的是数字，而elem.style.top返回的是字符串，数字+px。

2、读写可行性

elem.offsetTop只读，而elem.style.top可读写。