最近一直在看關於懶載入元件和無限下拉元件的實現，遇到了各種需要獲取dom高度、滾動的高度、瀏覽器可視區的高度...，索性今天對各種高度進行一次總結，省的每次遇到總要找谷哥、度娘。
element.clientheight:可視區高度，不包括border的高度,如果底部有滾動條也不包括滾動條的高度
element.clientwidth可視區寬度，不包括border的寬度,如果有滾動條也不包括滾動條的寬度
element.offsetheight：表示自身高度，包括border的值，如果底部有滾動條包括滾動條的高度
element.offsetwidth表示自身高度，包括border的值，如果有滾動條包括滾動條的寬度
element.offsettop:返回元素的垂直偏移位置。
element.offsetleft:返回元素的水平偏移位置。
element.scrollheight:返回元素的整體高度。
element.scrollwidth:返回元素的整體高度。
element.scrollleft:返回元素左邊緣與檢視之間的距離。
element.scrolltop:返回元素上邊緣與檢視之間的距離。
element.getboundingclientrect()方法返回元素的大小及其相對於視口的位置：
獲取某個元素的資訊（高版本：left,top,bottom,right,width,height）單位為畫素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。
注意：獲取的值是會根據滾動條變化的。
window.scrooly:window垂直方向上已滾動的距離,一般用 window.pageyoffset代替
window.scroolx:window水平方向上已滾動的距離,一般用 window.pagexoffset代替
window.innerheight:瀏覽器視窗視口的高度
window.screen：提供包含有關使用者螢幕的資訊
判斷滾動元素是否已經滾動到底部
（element.clientheight + element.offsettop）- element.scrollheight <= 0
css中關於各種寬度和高度區別
對於寬度的各種定義，不同語境下有不同的含義，pc端與移動端的表現也有不同，還可能與縮放水平 滾動條 viewport設定等因素相關。讀取寬度時，需要明確想要讀取的是哪種寬度 這個寬度值受哪些因素影響 與哪些因素無關，這樣才能寫出適應性更強的 經過一番試驗與探索，得到成果整理如下，包括 示意圖 演示頁...
JS獲取各種寬度 高度的簡單介紹
js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...
JS獲取各種寬度 高度的簡單介紹
scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offsetheight 獲取物件相對於版面...