1、各種對象

window.screen - 屏幕，
window - 窗口，
document.documentElement & document.body.parentNode - 文檔，
document.body - 文檔的主體。

2、各種屬性(單位為px)

屏幕

window.screen.availHeight 屏幕可用高度；
window.screen.availWidth 屏幕可用寬度；
window.screen.height 屏幕總高度 = availHeight + 下方任務欄；
window.screen.width 屏幕總寬度 = availWidth + 右方任務欄（如果存在）。

窗口(瀏覽器)

window.screenLeft & window.screenX 瀏覽器左邊框到屏幕左側的水平距離；
window.screenTop & window.screenY 瀏覽器上邊框到屏幕上側的垂直距離；
window.outerHeight / window.outerWidth 窗口外部大小，即整個瀏覽器的大小；
window.innerHeight / window.innerWidth 窗口內部大小，即視口viwport的大小，包括水平/垂直滾動條；
window.onresize 事件是在 window.innerHeight / window.innerWidth 改變時觸發的；

window.pageXOffset & window.scrollX 文檔當前在水平方向上被卷掉的像素數；
window.pageYOffset & window.scrollY 文檔當前在垂直方向上被卷掉的像素數。

元素

document.documentElement, document.body.parentNode 和 document.body 這三個元素節點都繼承了element對象的多個只讀的和可寫的高度和寬度屬性（“=” 右邊加‘CSS’的屬性為CSS中的屬性）：

element.clientHeight = CSS height + CSS padding 不包括邊框，邊距和水平滾動條；

在CSS中設置文本方向為ltr默認情況：

#rtl{
    width: 100px;
    height: 100px;
    border: 1px solid;
    direction: ltr;
    overflow: auto;
}

在CSS中設置文本方向為 rtl ：

#rtl{
    width: 100px;
    height: 100px;
    border: 1px solid;
    direction: rtl;
    overflow: auto;
}

在HTML中設置文本方向：

<div id=‘rtl‘ dir="rtl">this content will have a constant aspect ratio that varies based on the width.this content will have a constant aspect ratio that varies based on the width.</div>

可以看到不管是通過CSS還是HTML設置文本方向為rtl，同時存在溢出形成進度條，那麽 clientLeft 就會加上滾動條寬度；

element.scrollHeight = clientHeight + 溢出不可見的內容 + 偽元素的高度；

MDN譯文：

Element.scrollHeight只讀屬性是元素內容的高度的度量，包括由於溢出而在屏幕上不可見的內容。

scrollHeight值等於元素所需的最小高度，以便在不使用垂直滾動條的情況下適合視口中的所有內容。高度的測量方式與clientHeight相同：它包含元素的填充，但不包括元素的邊框、邊距或水平滾動條（如果存在）。它還可以包括偽元素的高度，例如 ::before 和 ::after。如果元素的內容不需要垂直滾動條就能填滿，則其滾動高度等於clientHeight

element.scrollWidth = clientWidth + 溢出不可見的內容 + 偽元素的寬度；

element.scrollTop 獲取或設置元素內容向上滾動的像素數；

element.scrollLeft 獲取或設置元素內容向左滾動的像素數；

element.offsetHeight = CSS height+ CSS padding + CSS border + 水平滾動條高度（如果存在），不包括偽元素的高度；

MDN：

For the document body object, the measurement includes total linear content height instead of the element‘s CSS height. Floated elements extending below other linear content are ignored.

element.offsetWidth = CSS width + CSS padding + CSS border + 垂直滾動條寬度（如果存在），不包括偽元素的寬度；

element.offsetTop 只讀屬性，返回當前元素的左上角相對於offsetParent 節點頂部的距離；

element.offsetLeft 只讀屬性，返回當前元素的左上角相對於offsetParent 節點左側的距離。

3、一些兼容寫法

文檔當前在水平方向上被卷掉的像素數，文檔當前在垂直方向上被卷掉的像素數。

var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop,
    x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

未完待續......

JS 中各種對象的高度、寬度和距離