Browser sizes are a confusing concept in javaScript, and I’ll explain them in this article and show you how to access them with concrete examples. Each guest officer good luck 🍵

The screen

The screen size

Screen size is the width and height of the screen: monitor or mobile screen. Window. screen is the object that holds screen size information.

  • Screen. width: indicates the width of the screen.
  • Screen. height: The height of the screen.

Available screen size

The available screen size consists of the width and height of the active screen, with no operating system toolbar.

  • Screen. availWidth: Available width, equal to the width of the screen.
  • Availableheight equal to the height of the screen minus the top bar on the MAC or the bottom bar on Windows.

Screen distance

  • ScreenTop: The distance from the top left corner of the browser window to the top edge of the screen.
  • ScreenLeft: The distance from the top left corner of the browser window to the left edge of the screen.

Firefox does not support these attributes, but you can use 👇:

  • ScreenX: equal to screenLeft.
  • “ScreenY” means “screenTop”.

The appendix

  1. Chrome /Opera: Saves the distance between the top left corner of the browser window and the screen
  • When the full screenThe four valuesAll are 0
  1. Firefox/Safari: Saves the distance between the top left corner of the browser window and the screen
  • When the browser window is in full screen, this refers to the distance between the entire browser and the top left corner of the screen, because the 8px border of the browser is not displayed in full screen, soscreenXandscreenYFor eight
  1. IE: Saved yesDocument display area in browser windowThe position of the upper-left corner of the screen relative to the upper-left corner.
  • The distance from the top of the page to the top of the screen: window.screenTop
  • The distance from the left side of the page to the left side of the screen: window.screenleft (full screen 0)
  1. ie9+
  • The browser window is in full screen modescreenXandscreenYFor eight
var leftPos = (typeof window.screenLeft=='number')?window.screenLeft:window.screenX;
Copy the code

Windows window

Window external dimensions

The external size of a window is made up of the width and height of the entire browser window, including the address bar, TAB bar, and other browser panels.

  • Window. outerWidth: Width of the browser window.
  • OuterHeight: The height of the browser window.

1. In Chrome and Opera, the outerWidth and outerHeight refer to the amount of space that can be seen as part of the browser when the browser window is full screen. 2. In FireFox, Safari, Internet Explorer 9 and Internet Explorer 10, when the browser window is in full screen mode, the outerWidth and outerHeight refer to not only the space occupied by the browser that you can see, but also the part that is not displayed. When the browser window exits full screen, it will have an 8px border around it. When the browser window is in full screen mode, the border is not displayed but is still counted in the outerWidth and outerHeight. 3. Internet Explorer 7 and 8 do not support this function.

Window internal dimensions

The window’s internal size (also known as viewport size) consists of the width and height of the viewport that displays the web page, including scroll bars.

  • Window. innerWidth: Width of the viewport.
  • Window. innerHeight: Height of the viewport.

The client area

The element’s client dimension refers to the amount of space taken up by the element’s content and its inner margins

  • ClientWidth: Width of the viewable area of the content.
  • ClientHeight: Height of the content viewable area.

ClientWidth = element width + padding (left and right) – padding-width (left and right Document. The documentElement. ClientWidth | | document. Body. ClientWidth version before (ie7);

Page size

Page size consists of the width and height of rendered page content.

  • ScrollWidth: The width of the actual content. Same as clientWidth without vertical scroll bar. Otherwise it’s equal to the width of the actual content plus the padding. ScrollWidth also includes pseudo-elements like ::before and ::after.
  • ScrollHeight: The height of the actual content. Same as clientHeight without vertical scrollbar. Otherwise it’s equal to the height of the actual content plus the padding. ScrollHeight also includes pseudo-elements like ::before and ::after.

The rolling distance

  • ScrollLeft: The distance between the leftmost end of the element and the leftmost end of the visible content in the window. The current left roll distance
  • ScrollTop: The distance between the top of the element and the top of the visible content in the window. The current roll up distance

1, if there is a scrollLeft = hide content width + border 2, if there is no scrollLeft = 0

The appendix

For scrollX, pageXOffset, scrollLeft, generally used as follows:

  1. window.scrollX;
  2. window.pageXOffset;
  3. document.documenetElement.scrollLeft

If you want to get the size of the document in pixels from the scroll to the left, you can do the following:

  • The pageXOffset property of the Window object always returns the length of the scroll, regardless of the docType, and is supported by all browsers except Internet Explorer 8 and earlier.
  • The scrollX property of the Window object always returns the length of the scroll, regardless of the docType, and is supported by Firefox, Chrome, and Safari.
  • If the document type is not specified, in IE, Firefox, Opera, Chrome, and Safari, the scrollLeft of the body is used to obtain the scroll value.
  • If the document type is specified, the scrollLeft value of the HTML can be obtained in IE, Firefox, and Opera, but it is always 0 in Chrome and Safari.
  • If the document type is not specified, the HTML scrollLeft property always returns 0.

Based on the above information, we can obtain the scrolling value of the scroll bar as follows:

var scrollLeft =  window.scrollX ! =undefined ? window.scrollX : window.pageXOffset; scrollLeft = scrollLeft ! =undefined ? scrollLeft : (document.documentElement || document.body).scrollLeft;
Copy the code

The offset

Offsets include all the visible space the element takes up on the screen. The visible size of an element is determined by its height, width, and all inner margins, scrollbar, and border sizes (note that margins are not included).

  • OffsetHeight: The amount of space an element occupies vertically, including its height, (visible)

Horizontal scroll bar height, top border height and bottom border height.

  • OffsetWidth: How much space an element occupies horizontally. This includes the element’s width and (visible) vertical

The width of the straight scroll bar, the width of the left border and the width of the right border.

  • OffsetLeft: The distance from the left edge of the current element’s content area (including border) to the left edge of the offsetParent content area (excluding border).
  • OffsetTop: The distance from the top of the current element’s content area (including border) to the top of the offsetParent content area (excluding border).

OffsetWidth = Element width + padding + border + scrollbar width

About the offsetParent

Htmlelement. offsetParent is a read-only property that returns a pointer to the closest (closest on the including hierarchy) location element that contains the element. If there is no positioned element, offsetParent is the nearest table,table cell, or root element (HTML in standard mode; Body in quirks mode). When element style.display is set to “None”, offsetParent returns NULL. OffsetParent is useful because offsetTop and offsetLeft are both relative to their inner margin boundaries

Let’s explore a few possible scenarios:

  1. If the parent element has a fixed location, the result of offsetParent is null (firefox: body, other browsers return null)
  2. The element itself has no fixed position and the parent element has no fixed position. OffsetParent is the element
  3. The element itself has no fixed position, and the parent element has a position. OffsetParent is the parent element closest to itself that has been positioned
  4. When element style.display is set to “None”, offsetParent returns NULL.
  5. Element offsetParent is null

Here are the results in Chrome, numbered as above

<! DOCTYPEhtml>
<html lang="en">
  <body>
    <div id="test1" style="position: fixed"></div>
    <div id="test2"></div>
    <div id="div0" style="position: absolute">
      <div id="div1" style="position: absolute">
        <div id="test3"></div>
      </div>
    </div>
    <div id="test4" style="display: none"></div>
    <script>
      console.log(document.getElementById('test1').offsetParent); // [1] :null
      console.log(document.getElementById('test2').offsetParent); // 【2】:<body>
      console.log(document.getElementById('test3').offsetParent); // 【3】:<div id="div1">
      console.log(document.getElementById('test4').offsetParent); // [4] null
      console.log(document.body.offsetParent); // [5] null
    </script>
  </body>
</html>
Copy the code

Simple 🌰 :

<main style="position: relative" id="main">
  <article>
    <div id="example" style="position: absolute; left: 180px; top: 180px">.</div>
  </article>
</main>
<script>
  alert(example.offsetParent.id); // main
  alert(example.offsetLeft); / / 180
  alert(example.offsetTop); / / 180
</script>
Copy the code

demo

Take 🌰 as a demonstration

<div id="example">
  ...Text...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>
Copy the code

The div element, which has the border, padding, and scroll bar (margin is not the part of the element, not shown here), looks like 👇 :

If there is no scrollbar content width is 300, but if the scrollbar is 16px wide (widths may vary between devices and browsers), only 300-16 = 284px width is retained, so we should take that into account.

The detailed annotations for element size and offset are as follows:

The offset

  • offsetWidth = 390: Internal CSS width (300px) + padding (2 * 20px) + border (2 * 25px)
  • offsetHeight = 290: External height.

The client area

In this example we can useclientTopandclientLeftTo measure element border:

  • clientLeft = 25: Left border width
  • clientTop = 25: Top border width

Document from right to left (operating system in Arabic or Hebrew). The scroll bar is not on the right but on the left, when clientLeft also includes the scroll bar width. (This is rare and can be ignored)

ClientWidth /Height provides the size of the content viewable area, including the content width and border, but no scroll bar:

  • clientHeight = 240: There is no horizontal scroll bar, so it is exactly the sum of the contents inside the border: CSS height 200px + top and bottom padding (2 x 20px). Or offsetheight290-border (2 * 25px)
  • clientWidth = 324The content height is 284px + left and right padding 40px. Or offsetwidth3990px – border (2 * 25px) – scroll bar width 16

When there is no padding, we can use clientWidth/clientHeight to get the size of the content area.

rolling

The scrollWidth/Height properties are similar to clientWidth/clientHeight, but they also include the scroll (hidden) part:

  • scrollHeight = 723: is the entire internal height of the content area, including the scroll section.
  • scrollWidth = 324: is the entire internal width, where we don’t have horizontal scrolling, so equal to clientWidth.

extension

Use these attributes to extend elements to the full width/height:

element.style.height = `${element.scrollHeight}px`;
Copy the code

The scrollLeft/scrollTop properties are the width/height of the hidden, scrolling portion of the element.

We can see it in the picture below 👇scrollHeightandscrollTopLink:

You can say scrollTop is “how much scroll up.”

Run elem. ScrollTop += 10. This scrolls the element content down 10px. Setting scrollTop to 0 or a larger value, such as 1e9, will scroll the elements to the top/bottom, respectively.

P.S.

After reading this article hopefully you now have a better idea of how to determine the various sizes. ❤ ️

Refer to the article 📜

❤️ javaScript Advanced Programming (3rd edition)

❤️ In-depth understanding of locating parent offsetParent and offset size

❤ ️ help.dottoro.com/ljfswxte.ph…

❤ ️ developer.mozilla.org/zh-CN/docs/…

❤ ️ www.cnblogs.com/miss-radish…

Extension 🏆

If you find this article helpful, check out my other articles at ❤️ :

👍 10 simple tips to make your vue.js code more elegant 🍊

👍 Close contact with websocket🚀

👍 5 Design patterns to know for Web development

👍 Data structures Web development should know about