JavaScript to get web page various width and location methods summarize _javascript Tips

Screen Object

Get the width (resolution) of the screen

Screen.width     //Screen wide
screen.height//Screen    high screen.availwidth//Screen  available width  The pixel height of the screen minus the value of the system part height
screen.availheight  //Screen  the pixel width of the available height screen minus the value of the system part width

Window object

Get window position and size

Window.screentop   ///window top distance from the top of the screen
window.screenleft  //window to the left of the screen from the left
window.innerwidth  // Width alert (window.innerwidth) of the viewable region (viewpoint) in the window
  ;//chrome 1366 ff 1366 ie 1366  // The height of the viewable region (viewpoint) in the window This value relates to alert (window.innerheight), such as whether the browser displays a menu bar,
  //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 
  //Description chrome When maximized, the browser window does not have the border width, when not maximized has the 8px border
  //ff and IE has 8px border width
window.outerheight  / Height alert (window.outerheight) of the browser window itself
  ;//chrome 728 ff 744 IE 744

Element Object

Before introducing the various width of the element object, it is necessary to explain the box model

Default box model Box-sizing:content-box;

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

When scroll bars are not present

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 scroll bars)
ClientHeight: Returns the visual 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 point scrollbarwidth=0
clientheight = 2*padding + height-scrollbarheight 
console.log (' Demo '). clientheight); 120 at this time scrollbarwidth=0

Offsetwidth: Returns the width of the element including the border and padding, but excluding the margins
Offsetheight: Returns the height of the element including the border and padding, but excluding the 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: Gets the calculated left position of the object relative to the layout or the parent coordinates specified by the Offsetleft property
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property

Console.log (document.getElementById (' demo '). offsetleft)  //30
console.log (' Demo '). offsettop)  //30

When a scroll bar appears

body{
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div id= "Demo" >123456789123456789</div>

ScrollWidth: Returns the entire width of the element (including the hidden place with the scroll bar)
ScrollHeight: Returns the height of the entire element (including the hidden place with the scroll bar)

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 sliding down the scroll block. Defaults to 0 when not set, and its value changes as the scroll block scrolls
ScrollLeft: The width of the element's hidden content when you slide the slider to the right. Defaults to 0 when not set, and its value changes as the scroll block scrolls

Event Object

The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
Event.pagex: Relative to the entire page coordinates, with the top left corner of the page as the coordinate origin to the mouse point of the horizontal distance (IE8 not supported)
Event.pagey: Relative to the entire page coordinates, with the top left corner of the page as the coordinate origin to the mouse point of the vertical distance (IE8 not supported)
Event.clientx: The coordinates of the relative viewable region, with the upper-left corner of the browser's visual area as the coordinate origin to the horizontal distance of the mouse point
Event.clienty: The coordinates of the relative viewable region, with the upper-left corner of the browser's visual area as the coordinate origin to the point of the mouse's vertical distance
Event.screenx: Relative to the computer screen coordinates, in the upper left corner of the screen as the coordinate origin to the mouse point of the horizontal distance
Event.screeny: Relative to the computer screen coordinates, in the upper left corner of the screen as the coordinate origin to the mouse point of the vertical distance
EVENT.OFFSETX: Relative to its own coordinates, with its own padding upper-left corner of the coordinate origin to the mouse point of the horizontal distance
Event.offsety: Relative to its own coordinates, with its own padding upper-left corner of the coordinate origin to the mouse point of the horizontal distance

Above this JavaScript to obtain the page various width and the position method summary is small arranges to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.