screen object

Get screen height (resolution)

screen.width //screen width
screen.height //screen height
screen.availwidth //Available screen width The value of the screen pixel height minus the system component height
screen.availheight //The available height of the screen is the value of the screen pixel width minus the system component width

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 visible area (viewpoint) in the window
  alert (window.innerwidth);//chrome 1366 ff 1366 ie 1366
window.innerheight //The height of the viewable area in the window This value is related to factors such as whether the browser displays a menu bar
  alert (window.innerheight);//chrome 643 ff 657 ie 673
window.outerwidth //The width of the browser window itself (viewable area width + browser border width)
  alert (window.outerwidth);//chrome 1366 ff 1382 ie 1382
  //Indicate that chrome has no border width when the browser window is maximized,8px border when not maximized
  //ff and ie have a border width of 8px
window.outerheight //The height of the browser window itself
  alert (window.outerheight);//chrome 728 ff 744 ie 744

element object

It is necessary to explain the box model before introducing the various height and width of the element objectDefault box modelbox-sizing:content-box;

boxwidth=2 * margin + 2 * border + 2 * padding + width
boxheight=2 * margin + 2 * border + 2 * padding + height

When no scroll bar appears

body {margin:0;}
#demo {
  width:100px;
  height:100px;
  padding:10px;
  border:20px;
  margin:30px;
  background-color:red;
}
<div>123456789 123456789</div>

clientwidth:Returns the visible width of the content on the page (excluding borders,Margins or scroll bars)

clientheight:Returns the visible height of the content on the page (excluding borders,Margins or scroll bars)

clientwidth=2 * padding + width-scrollbarwidth
console.log (document.getelementbyid ("demo"). clientwidth);//120 at this time scrollbarwidth=0
clientheight=2 * padding + height-scrollbarheight
console.log (document.getelementbyid ("demo"). clientheight);//120 at this time scrollbarwidth=0

offsetwidth:The width of the returned element includes borders and padding,But not including margins

offsetheight:The height of the returned element includes the border and padding,But not including margins

offsetwidth=2 * border + 2 * padding + width
console.log (document.getelementbyid ("demo"). offsetwidth) //160
offsetheight=2 * border + 2 * padding + height
console.log (document.getelementbyid ("demo"). offsetheight) //160

offsetleft:Get the calculated left position of the object relative to the layout or the parent coordinates specified by the offsetleft attribute

offsettop:Get the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop attribute

console.log (document.getelementbyid ("demo"). offsetleft) //30
console.log (document.getelementbyid ("demo"). offsettop) //30

When the scroll bar appears

body {
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div>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) //1040
scrollheight=2 * padding + width
console.log (document.body.scrollheight) //540

scrolltop:The height of the element's hidden content when scrolling down.When not set, it defaults to 0, and its value changes as the scroll block scrolls.

scrollleft:The width of the element ’s hidden content when you slide the scroll block to the right.When not set, it defaults to 0, and its value changes as the scroll block scrolls.

event object

The event object represents the state of the event,For example, the element in which the event occurred, the state of the keyboard keys, the position of the mouse, and the state of the mouse button.

event.pagex:The coordinates relative to the entire page,Horizontal distance from the top left corner of the page to the origin of the mouse (ie8 is not supported)

event.pagey:The coordinates relative to the entire page,The vertical distance from the top left corner of the page to the origin of the mouse (ie8 is not supported)

event.clientx:The coordinates of the relative viewable area,The horizontal distance from the top left corner of the browser visible area to the origin of the coordinates

event.clienty:The coordinates of the relative viewable area,The vertical distance from the top left corner of the browser visible area to the origin of the coordinates

event.screenx:The coordinates relative to the computer screen,The horizontal distance from the top left corner of the screen to the origin of the coordinates

event.screeny:The coordinates relative to the computer screen,The vertical distance from the top left corner of the screen to the origin of the coordinates

event.offsetx:Relative to its own coordinates,The horizontal distance from the origin of the top left corner of the padding to the position of the mouse

event.offsety:Relative to its own coordinates,The horizontal distance from the origin of the top left corner of the padding to the position of the mouse

to sum up