JavaScript gets a summary of the web page browser and screen height and width

I often find that when writing JavaScript, I need to use the height and width of the web page, browser or screen to solve the problem of layout and positioning. I often use it before I forget it.

Page width visible: document.body.clientWidth
Page visibility area high: document.body.clientHeight
Web page visible area width: document.body.offsetWidth (including width of edges)
Height of visible area of web page: document.body.offsetHeight (including width of edges)
Full text width: document.body.scrollWidth (with scrollbar width)
High text: document.body.scrollHeight (with scroll bar height)
Web pages are scroll high: document.body.scrollTop
Page scroll to the left: document.body.scrollLeft
In the body of the page: window.screenTop
Page body part left: window.screenLeft
High screen resolution: window.screen.height
Width of screen resolution: window.screen.width
Screen available workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth

HTML precise positioning: scrollLeft, scrollWidth clientWidth, offsetWidth
scrollHeight: gets the scrolling height of the object.
scrollLeft: sets or gets the distance between the left edge of the object and the far left end of the currently visible content in the window
scrollTop: sets or gets the distance between the top of the object and the top of the visible content in the window
scrollWidth: gets the scrolling width of the object
offsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent offsetParent attribute
offsetLeft: gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute
offsetTop: gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute
The horizontal coordinates of event.clientX relative to the document
The vertical coordinates of event.clientY relative to the document
event.offsetX horizontal coordinates relative to the container
event. The vertical coordinates of offsetY relative to the container
document.documentElement.scrollTop scroll vertically
event.clientX + document.documentElement.scrollTop the amount of scrolling relative to the horizontal coordinates of the document + in the vertical direction

IE, FireFox differences are as follows:

IE6.0, FF1.06 + :

clientWidth = width + padding 

clientHeight = height + padding 

offsetWidth = width + padding + border 

offsetHeight = height + padding + border 

IE5. 0/5.5:

clientWidth = width - border 

clientHeight = height - border 

offsetWidth = width 

offsetHeight = height

Summary: about the height and width of things to be quite a lot, specific some of their own do not understand, through their own test 1, some of the value is 1, so it is very confusing, can only depend on the situation.