Difference and connection between clientheight, offsetheight, style. height, and scrollheight

style. height includes the scroll bar of the element, excluding the border
clientheight does not include the scroll bar and border of the element, and the style is only available when there is no scroll bar of the element. height is equal to clientheight
offsetheight includes the element's scroll bar and border. Only when there is no element's scroll bar and border, offsetheight = style. height = clientheight
scrollheight offsetheight + scrolltop, only when there is no element of the scroll bar and border and scroll, offsetheight = style. height = clientheight =, offsetheight = style. height = scrollheight
formula:
style. height = clientheight + scroll bar width;
offsetheight = style. height + bordertop + borderbottom;
scrollheight = offsetheight + scrolltop;

likewise: clientwidth, offsetwidthstyle. width, scrollwidth
create different environment tests during demonstration (change the eyejs element style)