Js various locations, such as clientHeight, scrollHeight, offsetHeight, and scrollTop, offsetTop, clientTop difference?

1, clientHeight: represents the height of the visible region, and does not include border scroll bars;

2, offsetHeight: represents the height of the visible region, the border and the scroll bar comprising

3, scrollHeight: shows the height of all regions, including the scrolling because the hidden part;

4, clientTop: represents the thickness of the border of the border, in a case where unspecified generally 0

5, srcollTop: hidden height after rolling, with respect to get the object specified by the properties of the parent coordinate offsetParent (CSS positioning element or body element) height from the top

 

analysis:

   Scroll clientHeight and offsetHeight attributes and elements, location does not matter, it represents the height of the element, in which:

   clientHeight: including padding but not including the border, a horizontal scroll bar, the height of the element margin. For inline elements of this property has been a 0, a unit px, read-only elements.

 

 

 

   offsetHeight: including padding, border, horizontal scroll bar, but does not include the height of the element margin.

 

 The next discussions have scroll bars when they appear:

When the child elements of the element is higher than the present and overflow = scroll element, the element will present Scroll, time:

scrollHeight: because the sub-element is higher than the parent element, parent elements do not want another job as quilt bracing element shows a scroll bar, in this process of rolling element has a partially hidden, including representatives of the scrollHeight height not currently visible element portion . The highly visible part is actually clientHeight, which is scrollHeight> = clientHeight permanent establishment. ScrollHeight discussion makes sense when there is a scroll bar, scrollHeight == clientHeight permanent establishment in the absence of the scroll bar. Unit px, read-only elements.

 

 scrollTop: Representative scroll bar when the scroll bar to scroll down from the top of the element is highly obscured portion. ScrollTop == 0 permanent establishment in the absence of the scroll bar. Unit px, read and set.
offsetTop: The current top element from the top of the nearest parent element, and there is no scroll bar does not matter the distance. Unit px, read-only elements

 

 offsetTop: The current top element from the top of the nearest parent element, and there is no scroll bar does not matter the distance. Unit px, read-only elements.

 

Guess you like

Origin www.cnblogs.com/psxiao/p/11546318.html