偏移量、客户区大小与滚动大小

1. 偏移量

• offsetHeight: 元素在垂直方向上占用的空间大小。包括元素的高度、（可见的）水平滚动条的高度、上下边框高度。
• offsetWidth: 与 offsetHeight 同理。
• offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
• offsetTop: 与 offsetLeft 同理。
• offsetParent: 因为 offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent 属性中。offsetParent 不一定与 parentNode 相等，offsetParent 是距离元素最近的具有大小的元素。

偏移量的图解

其中 offsetParent 是已知定位的元素。

** 举个例子：**

.big{
  width: 200px;
  height: 200px;
  background: orange;
  margin-top:100px;
  margin-left:100px;
}

.inner {
  width:100px;
  height:100px;
  background:purple;
  margin:50px;
}

我们来测试 inner 元素， big 和 inner 元素都是默认定位。即：没有定位，元素出现在正常的流中。
显示效果为：

没有定位时的两个元素

然后我们测试 inner 元素和 big 元素的偏移量。

var inner = document.getElementsByClassName("inner")[0];
var big = document.getElementsByClassName("big")[0];
inner.offsetLeft        // 158
inner.offsetTop        // 100
inner.offsetWidth     // 100
inner.offsetHeight   //  100
big.offsetLeft          //  108
big.offsetTop          //  100
big.offsetWidth       //   200
big.offsetHeight     //  200

inner 元素的 offsetLeft 并不是距它最近的元素的距离。将 big 元素的位置固定后：

1. 如果 big 元素的 css 添加: position: relative;

.big{
  position: relative;       //添加这一句 
}

inner.offsetLeft   // 50
inner.offsetTop   // 0

2. 如果 big 元素的 css 添加: position: absolute;

.big{
  position: absolute;       //添加这一句 
}

inner.offsetLeft   // 50
inner.offsetTop   // 50

想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环至根元素。

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while(current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

偏移量的属性都是只读的，每次访问都要重新计算，重复使用时，可以将它们保存在局部变量中，以提高性能。

2. 客户区大小

客户区大小（client dimension）是指元素内容及其内边距所占据的空间大小。

• clientWidth: 元素内容区宽度加上左右内边距宽度。滚动条的大小不计算在内。
• clientHeight: 与 clientWidth 同理。

客户区的图解

  function getViewport(){
    if(document.compatMode == "BackCompat"){
        return {
            width:document.body.clientWidth,
            height: document.body.clientHeight
        }
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}

3. 滚动大小

滚动大小（scroll dimension）指的是包含滚动内容的元素的大小。

网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。
那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。

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

function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

在确定文档的总高度时，必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值。才能保证在浏览器下得到精确的结果。?

---

参考链接 ：用Javascript获取页面元素的位置