screen object
Get the height and width of the screen (resolution)
screen.width //Wide screen.height //High screen.availWidth //The screen can be used to subtract the value after the height of the system component.availHeight //The screen can be used to subtract the pixel width of the system component.
window object
Get window position and size
window.screenTop //The distance from the top of the window to the top of the screen window.screenLeft //The distance from the left side of the window to the left side of the screen window.innerWidth //The width of the viewpoint in the window alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366 window.innerHeight //The height of the viewpoint in the window This value is related to factors such as whether the browser displays the menu bar, etc. alert(window.innerHeight); //chrome 643 ff 657 ie 673window.outerWidth //The width of the browser window itself (visible area width + browser border width) alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 //Indicate that when chrome is maximized, the browser window has no border width, and when it is not maximized, there is an 8px border width//ff and ie up, down, left and right window.outerHeight //The height of the browser window itself alert(window.outerHeight); //chrome 728 ff 744 ie 744
element object
Before introducing the various heights and widths of element objects, it is necessary to explain the box model.
Default box model box-sizing:content-box;
boxWidth = 2*margin + 2*border + 2*padding + widthboxHeight = 2*margin + 2*border + 2*padding + height
When no scrollbar appears
body{margin:0;}#demo{ width:100px; height:100px; padding:10px; border:20px; margin:30px; background-color:red;}<div id="demo">123456789 123456789</div>clientWidth: Returns the visible width of the content on the page (excluding borders, margins, or scrollbars)
clientHeight: Returns the visible height of the content on the page (excluding borders, margins, or scrollbars)
clientWidth = 2*padding + width - scrollbarWidth console.log(document.getElementById('demo').clientWidth); //120 At this time scrollbarWidth=0clientHeight = 2*padding + height - scrollbarHeight console.log(document.getElementById('demo').clientHeight); //120 At this time scrollbarWidth=0offsetWidth: Returns the width of the element including border and fill, but does not include margins
offsetHeight: Returns the height of the element including borders and fills, but does not include margins
offsetWidth = 2*border + 2*padding + width console.log(document.getElementById('demo').offsetWidth) //160offsetHeight = 2*border + 2*padding + height console.log(document.getElementById('demo').offsetHeight) //160offsetLeft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetLeft property.
offsetTop: Gets the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop property
console.log(document.getElementById('demo').offsetLeft) //30console.log(document.getElementById('demo').offsetTop) //30When a scrollbar appears
body{ margin:0; padding:20px; width:1000px; height:500px;}<div id="demo">123456789123456789</div>scrollWidth: Returns the entire width of the element (including hidden places with scroll bars)
scrollHeight: Returns the height of the entire element (including hidden places with scroll bars)
scrollWidth = 2*padding + width console.log(document.body.scrollWidth) //1040scrollHeight = 2*padding + width console.log(document.body.scrollHeight) //540
scrollTop: The height of the element hidden content when sliding down the scroll block. When not set, the default is 0, and its value changes as the scrolling block scrolls
scrollLeft: The width of the element hidden content when sliding the scroll block to the right. When not set, the default is 0, and its value changes as the scrolling block scrolls
event object
The Event object represents the status of an event, such as the element in which the event occurs, the status of the keyboard key, the position of the mouse, and the status of the mouse button.
event.pageX: Relative to the coordinates of the entire page, the upper left corner of the page is the horizontal distance from the origin of the coordinate to the point where the mouse is located (IE8 does not support it)
event.pageY: Relative to the coordinates of the entire page, the upper left corner of the page is the vertical distance from the origin of the coordinate to the point where the mouse is located (not supported by IE8)
event.clientX: The coordinates of the relative visual area, using the upper left corner of the browser visual area as the horizontal distance from the origin of the coordinates to the point where the mouse is located, using the upper left corner of the browser visual area as the horizontal distance from the origin of the coordinates to the point where the mouse is located
event.clientY: The coordinates of the relative visual area, using the upper left corner of the browser visual area as the vertical distance from the coordinate origin to the point where the mouse is located, using the upper left corner of the browser visual area as the vertical distance from the coordinate origin point to the point where the mouse is located
event.screenX: Relative to the coordinates of the computer screen, the horizontal distance from the coordinate origin to the point where the mouse is located, using the upper left corner of the screen as the horizontal distance from the coordinate origin point to the point where the mouse is located
event.screenY: Relative to the coordinates of the computer screen, the vertical distance from the coordinate origin to the point where the mouse is located, using the upper left corner of the screen as the vertical distance from the coordinate origin point to the point where the mouse is located
event.offsetX: relative to its own coordinates, the horizontal distance from the coordinate origin of the upper left corner of its own padding to the point where the mouse is located is based on its horizontal distance from the coordinate origin of the coordinates to the point where the mouse is located
event.offsetY: relative to its own coordinates, the horizontal distance from the coordinate origin of the upper left corner of its own padding to the point where the mouse is located is based on its horizontal distance from the coordinate origin.
Summarize
The above is a summary of the methods of obtaining various heights and positions of web pages in JS, which provides convenience for everyone when learning JS. Friends in need can refer to it.