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;
複製程式碼轉載請註明出處，謝謝！
