offsetWidth / offsetHeight
offsetWidth
HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的布局寬度。一個典型的（各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設置的寬度(width)的值。
var offsetWidth = element.offsetWidth;
offsetHeight
HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內邊距和邊框，且是一個整數。
通常，元素的offsetHeight是一種元素CSS高度的衡量標准，包括元素的邊框、內邊距和元素的水平滾動條（如果存在且渲染的話），不包含:before或:after等偽類元素的高度。
對於文檔的body對象，它包括代替元素的CSS高度線性總含量高。浮動元素的向下延伸內容高度是被忽略的。
var offsetHeight = element.offsetHeight;
offsetTop / offsetLeft
介紹這兩個屬性之前，先介紹下 offsetParent 屬性，這樣有助於理解。
offsetParent
HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table, table cell 或根元素（標准模式下為 html；quirks 模式下為 body）。當元素的 style.display 設置為 "none" 時，offsetParent 返回 null。
offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對於其內邊距邊界的。
var offsetParent = element.offsetParent;
offsetTop
HTMLElement.offsetTop 為只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離。
var offsetTop = element.offsetTop;
offsetLeft
HTMLElement.offsetLeft 是一個只讀屬性，返回當前元素左上角相對於 HTMLElement.offsetParent 節點的左邊界偏移的像素值。
對塊級元素來說，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對於 offsetParent 的邊界框。
然而，對於可被截斷到下一行的行內元素（如 span），offsetTop 和 offsetLeft 描述的是第一個邊界框的位置（使用 Element.getClientRects() 來獲取其寬度和高度），而 offsetWidth 和 offsetHeight 描述的是邊界框的尺寸（使用 Element.getBoundingClientRect 來獲取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 來對應 left、top、width 和 height 的一個盒子將不會是文本容器 span 的盒子邊界。
var offsetLeft = element.offsetLeft;
clientWidth / clientHeight
clientWidth
Element.clientWidth 是一個只讀屬性，返回元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。
var clientWidth = element.clientWidth;
clientHeight
Element.clientWidth 是一個只讀屬性，對於沒有定義 CSS 或者內聯布局盒子的元素為0，同時它是元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。
clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算。
var clientHeight = element.clientHeight;
clientTop / clientLeft
clientTop
Element.clientTop 是一個只讀屬性，表示一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。
var clientTop = element.clientTop;
clientLeft
Element.clientLeft 是一個只讀屬性，表示一個元素的左邊框的寬度，以像素表示。如果元素的文本方向是從右向左（RTL, right-to-left），並且由於內容溢出導致左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度。clientLeft 不包括左外邊距和左內邊距。
var clientLeft = element.clientLeft;
innerWidth / innerHeight
innerWidth
window.innerWidth 是一個只讀屬性，表示瀏覽器視口（viewport）寬度（單位：像素），如果存在垂直滾動條則包括它。
var innerWidth = window.innerWidth;
innerHeight
window.innerHeight 是一個只讀屬性，表示瀏覽器窗口的視口（viewport）高度（以像素為單位），如果存在水平滾動條則包括它。
var innerHeight = window.innerHeight;
outerWidth / outerHeight
outerWidth
Window.outerWidth 是一個只讀屬性，表示整個瀏覽器窗口的寬度，包括側邊欄（如果存在）、窗口鑲邊（window chrome）和調正窗口大小的邊框（window resizing borders/handles）。
var outerWidth = window.outerWidth;
outerHeight
Window.outerHeight 是一個只讀屬性，表示獲取整個瀏覽器窗口的高度（單位：像素），包括側邊欄（如果存在）、窗口鑲邊（window chrome）和窗口調正邊框（window resizing borders/handles）。
var outerHeight = window.outerHeight;
scrollTop / scrollLeft
scrollTop
Element.scrollTop 屬性可以獲取或設置一個元素的內容垂直滾動的像素數。
一個元素的 scrollTop 值是這個元素的頂部到它的最頂部可見內容（的頂部）的距離的度量。當一個元素的內容沒有產生垂直方向的滾動條，那么它的 scrollTop 值為0。
scrollTop 可以被設置為任何整數值，同時注意：
- 如果一個元素不能被滾動（例如，它沒有溢出，或者這個元素有一個"non-scrollable"屬性）， scrollTop將被設置為0。
- 設置scrollTop的值小於0，scrollTop 被設為0
- 如果設置了超出這個容器可滾動的值, scrollTop 會被設為最大值
var scrollTop = element.scrollTop; // 獲取
element.scrollTop = intValue; // 設置
scrollLeft
Element.scrollLeft 屬性可以讀取或設置元素滾動條到元素左邊的距離。
注意如果這個元素的內容排列方向（direction） 是rtl (right-to-left) ，那么滾動條會位於最右側（內容開始處），並且scrollLeft值為0。此時，當你從右到左拖動滾動條時，scrollLeft會從0變為負數（這個特性在chrome瀏覽器中不存在）。
scrollLeft 可以是任意整數，然而：
- 如果元素不能滾動（比如：元素沒有溢出），那么scrollLeft 的值是0。
- 如果給scrollLeft 設置的值小於0，那么scrollLeft 的值將變為0。
- 如果給scrollLeft 設置的值大於元素內容最大寬度，那么scrollLeft 的值將被設為元素最大寬度。
var scrollLeft = element.scrollLeft; // 獲取
element.scrollLeft = intValue; // 設置
scrollWidth / scrollHeight
scrollWidth
Element.scrollWidth 是一個只讀屬性，以px為單位返回元素的內容區域寬度或元素的本身的寬度中更大的那個值。若元素的寬度大於其內容的區域（例如，元素存在滾動條時）, scrollWidth 的值要大於 clientWidth。
var scrollWidth = element.scrollWidth;
scrollHeight
Element.scrollHeight 是一個只讀屬性，它是一個元素內容高度的度量，包括由於溢出導致的視圖中不可見內容。沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after這樣的偽元素。
var scrollHeight = element.scrollHeight;
scrollX / scrollY
scrollX
返回文檔/頁面水平方向滾動的像素值，其中 pageXOffset 屬性是 scrollY 屬性的別名
var scrollX = window.scrollX;
完整的獲取文檔/頁面在水平方向已滾動的像素值的兼容性代碼：
var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
scrollY
返回文檔/頁面在垂直方向已滾動的像素值，其中 pageYOffset 屬性是 scrollY 屬性的別名
var scrollX = window.scrollY;
完整的獲取文檔/頁面在垂直方向已滾動的像素值的兼容性代碼：
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;