This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

In reality, users’ screen sizes vary widely, and we often need to get real-time information about the location of certain DOM elements, or information about screens and page Windows

This article recommends reading with code examples: Code Warehouse Express

To make it easier for you to understand, I took them in order, from the largest to the smallest: screen size, window size, document area size, dom location.

Get screen size

We need to get the details of the current screen from the window.screen object. The value of the property obtained by this method is calculated in pixels. This cannot be used as a basis for how many k screens the current screen is (because of scaling).

  // In general, you can obtain these four, and do not care about the other
  // height: screen height, pixel meter;
  // width: .
  
  let {height, width} = screen;

Copy the code

Get window, document area size

There are two kinds of browser Windows, one is the actual size of the browser in pixels (red box), and the other is the size of the page we developed (document area blue box). The only place we actually use in development is in the browser window (case 2)

access

  • Method one is obtained from the window object, where the value can be modified

    // The four values correspond to each other
// outerHeight: the height currently available to the browser. In this case, it is 860. In this case, the height of the task manager is subtracted.
// innerHeight, innerWidth; The width and height of the document display area does not include the length of the scroll bar (this means that the content that is not displayed does not count).
let {innerHeight, innerWidth, outerHeight, outerWidth} = window
Copy the code

  • Method two, which is obtained from the Screen object, cannot be modified

    You can only obtain the visual width and height of the browser, but not the width and height of the document area

    AvailHeight, availWidth is equivalent to outerHeight, outerWidth
let {availHeight, availWidth} = screen;
Copy the code

The dom position

This is the most common case, any DOM how do I know its height, its width, its position? As shown in the figure below, there is a parent element that contains two child elements.

getComputedStyle

GetComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle: getComputedStyle

  • GetComputedStyle shallow try

    const father = document.querySelector(".father");
const style = window.getComputedStyle(father);
console.log("father.getComputedStyle", style);
Copy the code

    The value of the attribute is simply not too much, as shown in the following figure. It is so dense that you can get any information you want

Using the DOM directly

```js const father = document.querySelector(".father"); console.log("father", [father]); // Add an element to an array and expand it to see all the attribute data. ` ` `Copy the code

GetBoundingClientRect access

father.getBoundingClientRect()
Copy the code

(x, y, top, left, bottom, right); // The only thing to notice is that bottom and right are not the same concepts as we used to locate them. // Width and height are equivalent to offsetWidth and offsetHeight.Copy the code

Detail the meaning of the three families in the location information

We already have all the style information, but there are a lot of painful attributes (concepts) for element position information, including the Client family, the Scroll family, and the offset family. These attributes are useful information, which are described below

The family of the client

  • ClientHeight and clientWidth results contain onlycontent+paddingAssociative memory:Standard box model
  • ClientLeft, clientTop The result is the value of border-left and border-top

{
    clientHeight: 310.clientLeft: 10.clientTop: 0.clientWidth: 483
}
Copy the code

Scroll family

Represents the size associated with the scroll bar

  • The scrollHeight and scrollWidth results contain only the content, but if a scrollbar is present, they contain the size of the part of the scrollbar that is not present

  • ScrollLeft and scrollTop Indicate the scrolling distance of the scroll bar

    • Formula for the bottom of the scrollbar

      const onScrollBottom = father.scrollTop + father.clientHeight  === father.scrollHeight
Copy the code

{
    scrollHeight: 600.scrollLeft: 0.scrollTop: 108.scrollWidth: 483
}
Copy the code

The family of offset

This is the size of the outer ring, the outermost ring

  • The result of offsetHeight and offsetWidth is border + padding + content, that is: the visible part of the element

  • The results of offsetLeft and offsetTop return the value of pixels offset by the upper left corner of the current element relative to the left edge of the htmlElement. offsetParent parent node. The coordinates of the upper left corner in the parent element can be derived from the coordinates of the remaining three points in the parent element

    / / the top right corner
const topRightCorner = {
    top: ele.offsetTop,
    right: ele.offsetLeft + ele.offsetWidth
}
/ / the bottom left corner
const bottomLeftCorner = {
    bottom: ele.offsetTop + ele.offsetHeight,
    left: ele.offsetLeft
}
/ / the bottom right hand corner
const bottomRightCorner = {
    bottom: ele.offsetTop + ele.offsetHeight,
    right: ele.offsetLeft + ele.offsetWidth
}
Copy the code

{
    offsetHeight: 330.offsetLeft: 100.offsetTop: 200.offsetWidth: 520
}
Copy the code

summary

The above three categories of location information are applicable to each DOM element, so the child elements are not analyzed and can be summarized as follows:

  • Take the position and size of the element in the parent element. Answer: use the offset family;
  • Take element content visible content size? A: Use the client family;
  • Take the total content length of the element (including the scroll bar below not shown)? Answer: Use the Scroll family

First of all, we should classify our own requirements, and then we can obtain the corresponding location information according to the requirements.

Exercises in this chapter

1, when I switch box-sizing (border-box, content-box), does the above formula hold? 😄 Welcome to reply

The summary of this chapter

Some content, and may not be easy to understand, I wrote at the treasure ~ ~ 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂