document element(clientHeight、cl

element.clientHeight          元素可见高度
element.clientWidth           元素可见宽度
element.offsetHeight          元素高度
element.offsetWidth           元素宽度
element.offsetLeft            元素水平偏移位置
element.offsetTop             元素垂直偏移位置
element.offsetParent          元素偏移的容器
element.scrollHeight          元素的整体高度
element.scrollWidth           元素的整体宽度
element.scrollLeft            元素左边缘与视图之间的距离
element.scrollTop             元素上边缘与视图之间的距离

clientHeight、clientWidth

包括padding，不包含滚动条、border、margin

image.png

offsetHeight、offsetWidth

包括padding、border、水平滚动条，不包含margin

image.png

scrollHeight、scrollWidth

子元素大于父元素，出现滚动：
当有滚动条时：scrollHeight>=clientHeight；
没有滚动条时：scrollHeight==clientHeight

image.png

scrollTop、scrollLeft

当有滚动条时，滚动条向下滚动的距离即元素顶部被遮住的高度

image.png

offsetTop、offsetLeft

元素距离最近父元素的距离，和滚动条无关

image.png
参考文档：
https://www.w3school.com.cn/jsref/dom_obj_all.asp
https://blog.csdn.net/qq_35430000/article/details/80277587