最全的獲取元素寬高及位置的方法

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;
複製代碼

---

轉載請註明出處，謝謝！