[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

因为常常搞混这几个属性，因此查找资料总结一下，方便之后翻出来温习。

1、偏移量-以offset开头的

　　一、offsetHeight：元素在垂直方向上占用的空间大小，像素。包括元素的高度、可见的水平滚动条的高度、上边框高度和下边框高度。

　　二、offsetWidth：同上，水平上占用的空间。

　　三、offsetLeft：元素的左外边框至包含元素的左内边框的距离。

　　四、offsetTop：同上，上部的距离。

　　包含元素的引用保存在offsetParent属性中，不必定是parentNode，好比<td>的offsetParent是<table>，由于它是DOM层次中距<td>最近的一个具备大小的元素。

　　

　　全部的偏移量属性都是只读的，并且每次访问都要从新计算，避免重复访问。

2、客户区大小-以client开头的

　　一、clientHeight：内容区+内边距的高度。

　　二、clientWidth：同上，宽度。

　　

　　这两个属性也是只读和须要从新计算的。

3、滚动大小-scroll开头的

　　一、scrollHeight：元素内容的总高度。

　　二、scrollWidth：总宽度。

　　三、scrollLeft：被隐藏在内容区域左侧的像素数。经过设置这个属性能够改变滚动位置。

　　四、scrollTop：被隐藏在内容区域上方的像素数。能够设置。

　　

4、innterHeight和outerHeight

　　一、innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位），若是存在水平滚动条，则包括它。

　　二、innerWidth：同上，宽度。

　　三、outerHeight：获取整个浏览器窗口的高度（单位：像素），包括侧边栏（若是存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

　　四、outerWidth：同上，宽度。

5、经常使用属性

　　一、获取浏览器视口高度：

window.innerHeight;
document.documentElement.clientHeight
document.body.clientHeight
document.documentElement.offsetHeight // 仅在html元素无边框的状况下

　　二、视口是否滚动到底部

document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight

6、其余

　　对于以上属性，某些低版本浏览器可能会有怪异的表现，这里没有考虑（主要是低版本IE）。

　　资料来源：JS高级程序设计、MDN