The difference between clientWidth, offsetWidth and Width in Window, body and Screen is often confused when getting screen and browser width in writing interface. Today, I will summarize to help myself understand.

The relationship between Window, Document, Screen, Body, and documentElement

Window is the top-level object of JavaScript in the browser, all global variables and functions are members of the Window object, and document is also the object of the window, representing the current browser loaded web page (DOM tree). Such as window. The alert () = alert (), the window. The document. The body. ClientWidth = document. Body. ClientWidth.

Screen is also the window object, representing the screen on which the current browser is located.

DocumentElement refers to the DOCUMENT’s HTML element object, and body refers to the document’s body object

Window relates the width and height property

  • InnerWidth: the innerWidth of the browser window (including the vertical scroll bar)
  • InnerHeight: The internal height of the browser window (including the horizontal scroll bar)
  • OuterWidth: Width of the entire browser window
  • OuterHeight: The height of the entire browser window

Document related width and height properties

There are three classes of related attributes:

  • The client related
  • Offset related
  • Scroll the

Client attributes

  • The width of the document. The body. ClientWidth: body (padding + content, do not contain the scroll bar)
  • Document. Body. ClientHeight: the height of the body

Offset related attributes

  • Document. The body. The offsetWidth: body contains the width of the border (padding + content + border)
  • Document. Body. OffsetHeight: body contains the height of the border

Scroll related properties

  • Document. Body. ScrollWidth: can the width of the roll body, including the overflow spill can’t see the content
  • Document. Body. ScrollHeight: body scrollable height, including overflow spill can’t see the content

DocumentElement is similar to using body. Change the body to documentElement and the element that measures the width and height is HTML.

For example, after setting reset. CSS, set the CSS for the current page

  body {
      font-family: "sans-serif";
      height: 800px;
      border: 40px solid orange ! important;
  }
Copy the code

Screen relates to the width and height property

  • Screen. width: the screen width, the maximum width when the browser is maximized
  • Screen. height: The maximum screen height when the browser is maximized
  • Screen. availWidth: The maximum horizontal width of the screen available to the browser
  • Screen. availHeight: The maximum vertical height of the screen available to the browser

If it is helpful to you, like, comment, praise is to encourage me, but also to support me to write down the power, pen core ~

This article was originally published in the wechat public number “Programmer Zhang Qingtian”, welcome to pay attention to the first time to get the latest share, together with progress.