First define a div .
Then a little decorate
The following began to distinguish
A, clientWidth and clientHeigh , clientTop and clientLeft
. 1 , the clientWidth actual width
clientWidth = width+左右padding
2 , clientHeigh actual height
clientHeigh = height + 上下padding
. 3 , clientTop actual width
clientTop = boder.top ( width border )
. 4 , clientLeft actual width
clientLeft = boder.left ( width of the left border )
Two, offsetWidth and offsetHight , offsetTop and offsetLeft
1, offsetWidth actual width
offsetWidth = width + left padding + about boder
2, offsetHeith actual height
offsetHeith = height + vertical padding + vertical boder
. 3 , the offsetTop actual width
the offsetTop : an outer edge of the frame to the nearest positioned parent (the current element offsetParent distance) of the upper edge of the box. If the parent
Level are not positioned, respectively, to the body from the top and to the left
. 4 , the offsetLeft actual width
the offsetLeft : outside the left edge of the frame element to the nearest positioned parent (current offsetParent the left edge of the box) distance. If you do not locate the parent, it is to the body from the top and to the left
Three, scrollWidth and scrollHeight , scrollTop and scrollLeft
. 1 , scrollWidth actual width
scrollWidth : Get true width specified label content layer (viewing area width + hidden area width).
2 , scrollHeight actual height
the scrollHeight : Get the true height of the tag content specified layer (visible region height + hidden area height)
3，scrollTop
scrollTop: distance from the top of the top layer to the visible region of the content.
Example:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
Continued access to highly ways:
window.addEventListener('scroll', ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});
4，scrollLeft
scrollLeft: from the visible region to the left of the left end of the content layer .