Width and height in js/jquery

I. Width and height related to window

Window.innerwidth: Browser window width

Window.innerheight: Height of browser window (excluding navigation, toolbar, etc.)

Window.outerwidth: Browser window width (many times ===window.innerwidth)

Window.outerheight: Height of browser window (including height of navigation, toolbar, etc.)

Window.screen.width: Width of the user device screen

Window.screen.height: Height of user device screen

Window.screen.availWidth:

Window.screen.availHeight:

Window.screentop: Browser height from top of screen

Window.screenleft: Browser distance from screen to left width

Second, the client about the width of high

ClientWidth, clientheight:padding+content If there is a scrollbar and subtract the scroll bar width/height

ClientTop: equal to border-top width

ClientLeft: equal to Border-left width

Three, offset-related wide-height

Offsetheight,

Offsetwidth equals border+padding+content, regardless of whether the content is greater than the original set width, regardless of whether there is a scroll axis

Offsetleft: Relative to the left distance of the anchored parent (offsetParent) element; border-left width of offsetParent margin-left+offsetparent + margin-left of the current element

OffsetTop: Relative to the left-hand distance of the anchored parent (offsetParent) element;

Iv. width and height associated with scroll

ScrollLeft, the width of the hidden part of the scroll bar

ScrollTop: The height of the hidden part of the scroll bar

ScrollWidth: The entire actual width of the content, when the content does not exceed the viewable area =clientwidth

ScrollHeight: The full actual height of the content, when the content does not exceed the viewable area clientheight

The relationship between five documentelement and body

Document (Nodetype=9,nodename= #docuemnt)-->documentelement (nodetype=1,nodename=html)-->body (nodeType=1, Nodename=body)

DocumentElement is the parent element of the body

Width and height in js/jquery