What are the properties commonly used to obtain window size in js?

window.innerHeight(innerWidth): Indicates the height (width) of the visible area. If there is a scroll bar at the bottom (right side), the height (width) of the bottom (right side) scroll bar will be calculated. Go in, This method is suitable for standard browsers and IE9+.

document.documentElement.clientHeight(clientWidth): Indicates the height (width) of the visible area. The height and width of the scroll bar will not be calculated. This method is applicable In standard browsers and lower versions of IE standard mode.

document.documentElement.offsetHeight(offsetWidth): First, offsetWidth gets the same value as clientWidth, and offsetHeight gets the height of the entire document.

Note:
I personally think that the documentElement above does not represent body. When an element has a border, element.offsetHeight contains the value of the border, but element.clientHeight does not contain the width of the border.

document.documentElement.scrollHeight(scrollWidth): Get the height and width of the full text of the web page, including the edge width.

document.body.clientHeight(clientWidth): First, the value obtained by clientWidth is equal to document.documentElement.offsetWidthCut off the body edge width, while clientHeight obtains the entire The height of the body minus the edge width.

document.body.offsetHeight(offsetWidth): The value obtained is equal to document.body.clientHeight(clientWidth) plus the width of the border of the body, that is These two values ​​get the width of the included edge.

document.body.scrollHeight(scrollWidth): Get the height and width of the full text of the web page, including the edge width.

document.body.scrollTop(scrollLeft): The distance between the top of the browser window and the top of the document (the distance between the browser window and the left side of the document), that is, the scroll bar The distance to scroll.

window.pageYOffset (pageXOffset): The distance between the top of the browser window and the top of the document (the distance between the browser window and the left side of the document), that is, the scroll bar scrolls distance.

window.screen.height(width): The height (width) of the screen resolution.

window.screen.availHeight(availWidth): Screen available work area height (width).

Let’s explain what offsetTop, clientTop, and scrollTop represent respectively:

offsetTop:The distance from the position above or the upper control, integer , unit pixel.

clientTop:The distance between the content area of ​​the element and the edge of the element, that is, the edge width of the element.

scrollTop:The distance between the top of the element window and the top of the element, that is, the distance of the scroll bar inside the element.

The above is the detailed content of What are the properties commonly used to obtain window size in js?. For more information, please follow other related articles on the PHP Chinese website!