一张图让你搞懂scrollHeight、offsetHeight等

名称	属性	说明
clientTop	只读	clientTop 表示一个元素的顶部边框的宽度，不包括左外边距和左内边距。
top	可写	该属性规定了元素的顶部位置，包括：内边距、滚动条、边框和外边距。
scrollTop	可写	scrollTop表示被选元素的垂直滚动条位置
offsetTop	只读	元素到offsetParent顶部的距离 offsetParent 元素的顶部padding、border及滚动条
clientHeight/clientWidth	只读	元素可视区域高度（height+padding，不包含边框）
offsetHeight/offsetWidth	只读	元素的可视高度（height+padding+border，包含边框)
scrollHeight	只读	自身的高度+隐藏元素的高度
offsetHeight	只读	自身的高度包含内边距（padding）和边框（border）

getBoundingClientRect

使用

const textArea = document.getElementById('textArea')
console.log(textArea.getBoundingClientRect().bottom)
//top\left……