快速瞭解所有JS高度的相關信息

Question

JavaScript中有很多'高度'相關屬性（clientHeight，Window.height，scrollHeight，offsetHeight等）。

我可以猜出他們做了什麼，但我想要一個正式的，詳細的指南...通用Google搜索沒有幫助，我可以使用任何良好的來源？

答案的細節'他們賺布朗尼點！

Answer 1

兩種資源價值諮詢：

• CSSOM View Module
• W3C DOM Compatibility - CSS Object Model View

下面是（已被列入每對只有一維）從兩摘錄的列表：

window.innerWidth & window.innerHeight
視口的尺寸（瀏覽器窗口的內部）。 innerWidth屬性在獲取時，必須返回包含渲染滾動條大小的視口寬度（如果有的話）。

window.outerWidth & window.outerHeight
整個瀏覽器窗口（包括任務欄和這樣）的尺寸。 outerWidth屬性上，獲取，必須返回客戶端窗口的寬度。如果沒有客戶端窗口，則此屬性必須返回零。

window.pageXOffset & window.pageYOffset
整個頁面已滾動的像素數量。 pageXOffset屬性在獲取時，必須返回相對於視口左側的初始包含塊原點的x座標。

window.screenX & window.screenY
屏幕上的瀏覽器窗口的位置。 screenX屬性在獲取時，必須爲將客戶端窗口頂部相對於輸出設備屏幕原點的x座標返回爲像素數，如果不存在這種情況，則返回0。

screen.availHeight & screen.availWidth
可用的寬度和高度在屏幕上（不包括OS任務欄和這樣）。 availWidth屬性在獲取時，必須返回輸出設備的渲染表面的可用寬度。

screen.height & screen.width
屏幕的寬度和高度。 width屬性上獲取，必須返回輸出設備的寬度。

<element>.clientLeft & <element>.clientTop
相對於（包括邊界）的整個元件的左上角的內容字段的左上角的位置。獲取時，clientTop屬性會返回border-top-width屬性的計算值加上頂部填充邊緣和頂部邊緣邊緣之間呈現的任何滾動條的寬度。

<element>.clientWidth& <element>.clientHeight
寬度和內容字段的高度，不包括邊界和滾動條，但包括填充。獲取時，clientWidth屬性返回視圖寬度，不包括渲染滾動條的大小（如果有），如果元素是根元素和填充邊的寬度（不包括填充邊與填充邊之間的任何渲染滾動條的寬度否則。

<element>.offsetLeft& <element>.offsetTop
左和元件相對於它的offsetParent所述的頂部位置。的offsetTop屬性，當稱爲元件上甲，必須返回是以下算法的結果的值：（1）如果甲是HTML body元件或不具有相關聯的CSS佈局框返回零並停止這個算法。 （2）如果A的offsetParent是null或HTML body元素返回頂部邊界邊緣的y座標A並停止此算法。 （3）返回從相對於初始包含塊原點的頂部邊界邊緣的y座標中減去offsetParent的A的頂部填充邊的y座標的結果。 （*）如果內聯元素由多個行框組成，則只有內容順序中的第一個才能用於上述算法。

<element>.offsetWidth & <element>.offsetHeight
整個元件，包括邊界的寬度和高度。 offsetWidth屬性在調用元素時A，必須返回值是以下算法的結果：（1）如果A沒有關聯的CSS佈局框，則返回零並停止此算法。 （2）返回的邊界寬度A。

<element>.scrollLeft & <element>.scrollTop
元件已滾動的像素的量。讀/寫。該scrollTop屬性，稱爲元素在當A，必須返回運行以下算法的結果值：（1）如果一個沒有相關的CSS佈局框返回零並停止該算法。 （2）將對齊點處的內容的y座標返回到內容邊緣的頂部A。

<element>.scrollWidth & <element>.scrollHeight
全部內容字段的寬度和高度，包括當前隱藏的部分。如果沒有隱藏的內容，它應該等於clientX/Y。該scrollWidth屬性，稱爲元素在當A，必須返回值是以下算法的結果：（1）如果一個沒有相關的CSS佈局框返回零並停止該算法。 （2）返回的甲的padding-left屬性的計算值，加上甲的padding-right屬性的計算值，加上甲內容寬度。