Summary of methods for obtaining various height and width of web pages by javascript

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=0

offsetWidth: 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) //160

offsetLeft: 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) //30

When 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 scrollbars)

 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.

The above summary of the methods of obtaining various heights and widths and positions of web pages in JavaScript is the entire content shared by the editor. I hope it can give you a reference and I hope you will support Wulin.com more.