注意：本文只簡單的介紹了各個檢視的屬性和方法。如果想要知道相容性或者更多，請至文章底部參考連結處。
本文內容分為五大部分：
- Window檢視屬性
- innerHeight 和 innerWidth
- outerHeight 和 outerWidth
- pageXOffset 和 pageYOffset
- screenX 和 screenY
- Screen檢視屬性
- availWidth 和a vailHeight
- colorDepth
- pixelDepth
- width 和 height
- 文件檢視(DocumentView)和元素檢視(ElementView)方法
- document.elementFromPoint()
- element.getBoundingClientRect()⭐滑動欄滾動的時候常用
- document.getClientRects()
- element.scrollIntoView()
- 元素檢視屬性
- clientHeight 和 clientWidth
- clientLeft 和 clientTop
- offsetWidth 和 offsetHeight
- offsetLeft 和 offsetTop
- offsetParent
- scrollHeight 和 scrollWidth
- scrollLeft 和 scrollTop
- scrollLeftMax 和 scrollTopMa
- 滑鼠位置
- clientX 和 clientY
- offsetX 和 offsetY
- pageX 和 pageY
- screenX 和 screenY
- x 和 y
一、Window檢視屬性
⭐innerHeight 屬性和 innerWidth 屬性：獲取window瀏覽器內部大小，也就是視口（viewport）大小
⭐outerHeight 屬性和 outerWidth 屬性：表示整個瀏覽器窗體的大小
pageXOffset 屬性和 pageYOffset 屬性：表示整個頁面滾動的畫素值（水平方向的和垂直方向的）
screenX 屬性和 screenY 屬性：瀏覽器視窗在顯示器中的位置，screenX表示水平位置，screenY表示垂直位置
如下圖所示，紅色部分為覽器視窗，綠色部分為瀏覽器的視口（viewport）
二、Screen檢視屬性
availWidth 和 availHeight：顯示器可用寬高，不包括工作列之類的東西
colorDepth：顯示器的顏色深度
pixelDepth：該屬性基本上與colorDepth一樣
width 和 height：表示顯示器螢幕的寬高。
三、文件檢視(DocumentView)和元素檢視(ElementView)方法
document.elementFromPoint()：返回給定座標處所在的元素。
⭐element.getBoundingClientRect()：返回一個Object物件，該物件有6個屬性：top,lef,right,bottom,width,height，大小都是相對於文件檢視左上角計算而來。
document.getClientRects()：返回元素的數個矩形區域，返回的結果是個物件列表，具有陣列特性。
element.scrollIntoView()：讓元素滾動到可視區域（不屬於草案方法）
element.getBoundingClientRect()詳解
返回元素的大小及其相對於視口的位置。
當計算邊界矩形時，會考慮視口區域（或其他可滾動元素）內的滾動操作，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之立即發生變化（因此，它們的值是相對於視口的，而不是絕對的）。如果你需要獲得相對於整個網頁左上角定位的屬性值，那麼只要給top、left屬性值加上當前的滾動位置（通過 window.scrollX 和 window.scrollY），這樣就可以獲取與當前的滾動位置無關的值。
四、元素檢視屬性
⭐clientWidth 和 clientHeight：內容區域的高度和寬度，包括padding大小，但是不包括邊框和滾動條
⭐clientLeft 和 clientTop：內容區域的左上角相對於整個元素左上角的位置（包括邊框）
⭐offsetWidth 和 offsetHeight：整個元素的尺寸（包括邊框）
⭐offsetLeft 和 offsetTop：表示相對於最近的祖先定位元素（CSS position 屬性不是static 的元素）的左右偏移值。
offsetParent：第一個祖定位元素（即用來計算上面的offsetLeft和offsetTop的元素）
scrollWidth 和 scrollHeight：表示整個內容區域的寬高，包括隱藏的部分。如果元素沒有隱藏的部分，則相關的值應該等用於clientWidth和clientHeight。當你向下滾動滾動條的時候，scrollHeight應該等用於scrollTop + clientHeight。
⭐scrollLeft 和 scrollTop：表示元素滾動的畫素大小。可讀可寫。
未脫離文件流：offsetLeft:父級元素margin+父級元素padding+父級元素border+自己margin
脫離文件流：offsetLeft:和父級元素沒關係
style.width僅能返回以style方式定義的內部樣式表的width屬性值。
clientWidth 和 clientHeight屬性會將獲取的值四捨五入取整數。 如果你需要小數結果, 請使用 element.getBoundingClientRect()
又因為使用element.getBoundingClientRect()只能獲取元素的width / height，但是這個值是 offsetWidth / offsetHeight ，包括邊框的長度，所以不能獲取clientWidth / clientHeight
五、滑鼠位置
clientX 和 clientY：相對於window，為滑鼠相對於window的偏移。在iphone上，這對值返回的位置就等同於下面要提到的pageX/Y
offsetX 和 offsetY：表示滑鼠相對於當前被點選元素padding box的左上偏移值
pageX 和 pageY：為滑鼠相對於document的座標
screenX 和 screenY：滑鼠相對於顯示器螢幕的偏移座標。
x 和 y：相當於clientX/clientY。