0002-元素大小之偏移量

元素的可见大小是由内容高度（height）、宽度(width)，以及所有内边距(padding)、滚动条和边框决(border)定（不包括外边距<margin>），通过下面四个属性可以计算元素的偏移量（offset dimension）：

1、offsetHeight：元素在垂直方向上占用的空间，包括元素的高度（height),水平滚动条（可见的）的高度及上下边框高度。

2、offsetWidth：元素在水平方向上占用的空间，包括元素的宽度（width),垂直滚动条（可见的）的宽度及左右边距宽度。

注：上述两属性均以像素计

3、offsetLeft：元素的左外边距到它的包含元素的左内边框之间的像素数。

4、offsetTop：元素的上外边距到它的包含元素的上内边框之间的像素数。

offsetLeft和offsetTop与包含元素有关，元素的包含元素的引用可以通过它的offsetParent属性来访问。但offsetParent不一定等于parentNode。

如<td>的offsetParent是<table>元素。这是因为<table>是在DOM层次中离<td>最近的具有大小的元素。

如下图所示：

一个元素在页面上的偏移量，可以通过将它的offsetLeft与它的offsetParent的offsetLeft循环属性相加，一直到根元素，可得它的左偏移量的近似精确的值。上偏移量可用同样的方法累加offsetTop。

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;
}

对于简单的CSS布局页面来说，这两个函数可以得到很精确的结果，而使用表格和内嵌框架页面的页面，由于不同的浏览器实现这些元素的方式不同，得到的值就不太准确了。