1、clientHeight：表示的是可視區域的高度，不包含border和滾動條；
2、offsetHeight：表示的是可視區域的高度，包含了border和滾動條
3、scrollHeight：表示了所有區域的高度，包含了因為滾動被隱藏的部分；
4、clientTop：表示邊框border的厚度，在未指定的情況下一般為0
5、srcollTop：滾動后被隱藏的高度，獲取對象相對於由offsetParent屬性指定的父坐標（css定位的元素或body元素）距離頂端的高度
分析：
clientHeight和offsetHeight屬性和元素的滾動、位置沒有關系，它代表元素的高度，其中：
clientHeight：包括padding但不包括border、水平滾動條、margin的元素的高度。對於inline的元素這個屬性一直是0，單位px，只讀元素。
offsetHeight：包括padding、border、水平滾動條，但不包括margin的元素的高度。
接下來討論出現有滾動條時的情況：
當本元素的子元素比本元素高且overflow= scroll時，本元素會scroll，這時：
scrollHeight: 因為子元素比父元素高，父元素不想被子元素撐的一樣高就顯示出了滾動條，在滾動的過程中本元素有部分被隱藏了，scrollHeight代表包括當前不可見部分的元素的高度。而可見部分的高度其實就是clientHeight，也就是scrollHeight>=clientHeight恆成立。在有滾動條時討論scrollHeight才有意義，在沒有滾動條時scrollHeight==clientHeight恆成立。單位px，只讀元素。
scrollTop: 代表在有滾動條時，滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時scrollTop==0恆成立。單位px，可讀可設置。
offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關系。單位px，只讀元素
offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關系。單位px，只讀元素。
轉自：https://blog.csdn.net/qq_35430000/article/details/80277587