DOM 元素節點幾何量與滾動幾何量

當在 web 瀏覽器中檢視 html 文件時，dom 節點被解析，並被渲染成盒模型（如下圖），有時我們需要知道一些資訊，比如盒模型的大小，盒模型在瀏覽器中的位置等等，本文我們就來詳細了解下元素節點的幾何量以及滾動幾何量。

使用 offsettop 和 offsetleft 屬性，我們可以獲黃色別墅取元素節點相對於 offsetparent 的偏移畫素量。這些元素節點屬性告訴我們某元素上部與左側邊框最外沿到 offsetparent 上部和左側邊框內部的距離，以畫素為單位。 offsetparent 的值判定依據為查詢離該元素最近的 css 定位值不為 static 的祖先元素。如果沒有，則元素，某些人或稱之為「文件」（而不是瀏覽器視區），即為 offsetparent 值。如果，在查詢祖先過程中，找到或元素，且它的定位為 static，則它將成為 offsetparent 的值。