JS中client/offset/scroll等的寬高解析

原文地址：→傳送門

window相關寬高屬性

1. window.outerHeight (窗口的外層的高度) / window.outerWidth (窗口的外層的寬度)

• window.outerHeight獲取整個瀏覽器窗口的高度（單位：像素），包括側邊欄（若是存在）、窗口鑲邊（window chrome）和窗口調正邊框。包含調試窗及瀏覽器邊框
• window.outerWidth表示整個瀏覽器窗口的寬度，包括側邊欄（若是存在）、窗口鑲邊（window chrome）和調正窗口大小的邊框。包含調試窗及瀏覽器邊框
  

參考連接：
window.outerHeight -MDN
window.outerWidth-MDN

2. window.innerHeight (瀏覽器窗口的視口的高度)和 window.innerWidth

• window.innerHeight瀏覽器窗口的視口（viewport）高度（以像素爲單位），若是存在水平滾動條，則包括它。不包含調試窗及瀏覽器邊框
• window.innerWidth瀏覽器視口（viewport）寬度（單位：像素），若是存在垂直滾動條則包括它。不包含調試窗及瀏覽器邊框

參考連接：
window.innerHeight - MDN
window.innerWidth - MDN

3. window.screen.width和window.screen.height

注：在獲取值時可不加window.前綴

• window.screen.width聲明瞭顯示當前瀏覽器的屏幕的寬度，以像素計
• window.screen.height聲明瞭顯示當前瀏覽器的屏幕的高度，以像素計
  

參考連接：
window.screen - MDN
window.screen - MDN

4. window.screen.availHeight和window.screen.availWidth

• window.screen.availHeight聲明瞭顯示瀏覽器的屏幕的可用高度，以像素計。除去咱們底部任務欄外的屏幕高度
• window.screen.availWidth聲明瞭顯示瀏覽器的屏幕的可用寬度，以像素計

參考連接：
window.screen - MDN
window.screen - MDN

5. window.screenTop和window.screenLeft

• 功能： 返回窗口的左上角在屏幕上的x座標。該屬性爲只讀屬性。語法： window.screenLeft。注：在Firefox等瀏覽器中使用的是screenX屬性。
• 返回窗口的左上角在屏幕上的y座標。該屬性爲只讀屬性。 語法： window.screenTop。注：在Firefox等瀏覽器中使用的是screenY屬性。
  

參考連接：
window.screenTop
window.screenLeft

document下面的相關屬性（offset/client/scroll）

與client相關屬性

6. document.body.clientWidth或element.clientWidth

• 表示元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條（若是有的話）、邊框和外邊距。
• 該屬性值會被四捨五入爲一個整數。若是你須要一個小數值，可以使用 element.getBoundingClientRect()。
• 語法：var intElemClientWidth = element.clientWidth;
  

參考連接：
Element.clientWidth - MDN

7. document.body.clientHeight或element.clientHeight

• 返回元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。

參考連接：
element.clientHeight - MDN

8. document.body.clientLeft或element.clientLeft

• 表示一個元素的左邊框的寬度，以像素表示。若是元素的文本方向是從右向左（RTL, right-to-left），而且因爲內容溢出致使左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度。
  

參考連接：
Element.clientLeft - MDN

9. document.body.clientTop或element.clientTop

• 一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。

參考連接：
Element.clientTop

與offset相關屬性

這一對屬性指的是元素的border+padding+content的寬度和高度

10. document.body.offsetWidth或element.offsetWidth

• border/padding/width三者的總寬度
  

參考連接：
HTMLElement.offsetWidth

11. document.body.offsetHeight或element.offsetHeight

• border/padding/width三者的總高度，且是一個整數。

參考連接：
HTMLElement.offsetHeight

12. HTMLElement.offsetLeft和HTMLElement.offsetTop

這兩個屬性是基於offsetParent的

• 若是當前元素的父級元素沒有進行CSS定位（position爲absolute或relative）,offsetParent爲body.
• 假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素。
• offsetLeft返回當前元素左上角相對於 HTMLElement.offsetParent 節點的左邊界偏移的像素值。
• offsetTop返回當前元素相對於其 offsetParent 元素的頂部的距離。
• 在IE6/7中：

offsetLeft=(offsetParent的padding-left)+(當前元素的margin-left)

• 在IE8/9/10及Chrome中：

offsetLeft=(offsetParent的margin-left)+(offsetParent的border寬度)+(offsetParent的padding-left)+(當前元素的margin-left)

• 在FireFox中：

offsetLeft=(offsetParent的margin-left)+(當前元素的margin-left)+(offsetParent的padding-left)

參考連接：
HTMLElement.offsetLeft
HTMLElement.offsetTop

與scroll相關屬性

13. document.body.scrollWidth及document.body.scrollHeight

body與普通element不同

• 給定body寬高 < 瀏覽器窗口時：

scrollWidth = 瀏覽器窗口寬度
scrollHeight = 瀏覽器窗口高度

• 給定body寬高大於瀏覽器窗口，且內容小於給定body寬高時：

scrollWidth = 給定的寬度 + body全部padding + body全部margin + body全部border
scrollHeight = 給定的高度 + body全部padding + body全部margin + body全部border

• 給定body寬高大於瀏覽器窗口，且內容大於給定窗口時：

scrollWidth = 內容的寬度 + body全部padding + body全部margin + body全部border
scrollHeight = 內容的高度 + body全部padding + body全部margin + body全部border

參考連接：
Element.scrollWidth

14. element.scrollWidth和element.scrollHeight

• 當無滾動條時：

scrollWidth = clientWidth = 元素寬度 + padding和 
scrollHeight = clientHeight = 元素高度 + padding和

• 當有滾動條時：

scrollWidth = 實際內容的寬度 + padding和 
scrollHeight  = 實際內容的高度 + padding和

15. document.body.scrollTop及document.body.scrollLeft

• 這對屬性是可讀寫（可被從新賦值） 的
• 指的是當元素其中的內容超出其寬高的時候，元素被捲起來的高和寬度。
• 對於element元素一樣適用

16. window.scrollY及window.scrollX

• window.scrollY 文檔從頂部開始滾動過的像素值 / window.scrollX 文檔從左側開始滾動的像素值。

event中的五種座標

1. clientX及clientY：相對於瀏覽器（可視區左上角0,0）的座標

2. screenX和screenY：相對於設備屏幕左上角（0,0）的座標

3. offsetX和offsetY：相對於事件源左上角（0,0）的座標

4. pageX和pageY：相對於整個網頁左上角（0,0）的座標

參考來源：

• 視頻課程：JS/jQuery寬高的理解和應用
• 博客：JavaScript中的各類寬高屬性