JavaScript gets the summary of web page, browser, screen height and width_javascript tips

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 positioning. I often forget it after using it before, or I just search it on the Internet, so I just summarize it myself. This also makes it easier to use again, saving time and effort.

Visible area width of web page: document.body.clientWidth
The height of the visible area of ​​the web page: document.body.clientHeight
The width of the visible area of ​​the web page: document.body.offsetWidth (including the width of the edges)
The height of the visible area of ​​the web page: document.body.offsetHeight (including the width of the edge)
Full text width of web page body: document.body.scrollWidth (width with scroll bar)
Full text height of web page body: document.body.scrollHeight (height with scroll bar)
The page was scrolled so high: document.body.scrollTop
The left side of the web page being scrolled: document.body.scrollLeft
On the main body of the web page: window.screenTop
The left part of the web page text: window.screenLeft
High screen resolution: window.screen.height
The width of the 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 scroll height of the object.
scrollLeft: Sets or gets the distance between the left edge of the object and the leftmost 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: Get the scroll width of the object
offsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property
offsetLeft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property
offsetTop: Gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute
event.clientX horizontal coordinate relative to the document
event.clientY vertical coordinate relative to the document
event.offsetX horizontal coordinate relative to the container
event.offsetY vertical coordinate relative to the container
document.documentElement.scrollTop The value of vertical scrolling
event.clientX document.documentElement.scrollTop The horizontal coordinate relative to the document The amount of vertical scrolling

The differences between IE and FireFox are as follows:

IE6.0, FF1.06:

Copy code The code is as follows:

clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = height padding border

IE5.0/5.5:

Copy code The code is as follows:

clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

Summary: There are a lot of things about height and width. I don’t understand some of the specifics. After testing it myself, some of the values ​​are the same, so it’s very confusing. I can only depend on the situation. It depends.