A preface

Always encounter all sorts of need to use in the front-end development or calculated coordinates and the distance, but these properties and methods of many, all skillfully down is not an easy task, most can only check now, take a lot of time and effort, so there is the idea of finishing record, namely deepen the impression, and convenient to consult at any time.

The window object

In the browser, the window object (note that w is lowercase) refers to the current browser window.

It is also the top-level object of the current page, that is, the top level object, and all other objects are subordinate to it. A variable that is not declared is a property of the top-level object by default.

Excerpt from “Ruan Yifeng JavaScript Tutorial”

Position size attribute

window.screenX , window.screenY

Read-only property

Returns the horizontal and vertical distance (in pixels) between the top left corner of the browser window and the top left corner of the current screen.

window.innerHeight , window.innerWidth

Read-only property

Returns the height and width of the visible area of the web page in the current window, the size in pixels of the viewport.

Note that these two properties include the height and width of the scroll bar.

window.outerHeight , window.outerWidth

Read-only property

Returns the height and width of the browser window, including the browser menu and border in pixels.

window.scrollX , window.scrollY

Read-only property

Aliases: window.pageXOffset, window.pageYOffset

Returns the horizontal and vertical scrolling distances of the page, respectively, in pixels.

Notice that the return value of these two properties is not an integer, but a double-precision floating-point number. If the page is not scrolling, their value is 0.

Excerpt from “Ruan Yifeng JavaScript Tutorial”

For cross-browser compatibility, use window.pageXOffset instead of window.scrollX. In addition, older versions of IE (<9) do not support either attribute, and must be addressed with other non-standard attributes.

From MDN: developer.mozilla.org/zh-CN/docs/…

Window object method

window.scrollTo() , window.scroll() , window.scrollBy()

Window. scrollTo method –> alias: window.scroll method

Use to scroll a document to a specified location.

It takes two parameters that represent the page coordinates in the upper-left corner of the window after scrolling.

You can also accept a configuration object as a parameter.

window.scrollTo(options)
Copy the code

The configuration object Options has three properties.

  • Top: indicates the vertical coordinate of the upper left corner of the page after scrolling, that is, the Y coordinate.
  • Left: horizontal coordinate of the upper left corner of the page after scrolling, that is, x coordinate.
  • Behavior: A string representing the scrolling mode with three possible values (smooth, instant, and auto). The default value is auto.

The window.scrollBy method is used to scroll a web page a specified distance in pixels.

It takes two parameters: a pixel that scrolls horizontally to the right and a pixel that scrolls vertically down.

Note: Appreciate the difference between the two.

Three Element node

The Element node object corresponds to the HTML Element of a web page. Each HTML Element is converted into an Element node object (Element node) in the DOM tree.

Relevant properties

Element. ClientHeight Element. ClientWidth

Returns the height and width of the element, respectively, always integer values.

If the element is inline (display: inline;) , the return value is 0.

Conceptually speaking, the returned numerical calculation includes the content and padding of the element, not the border and margin.

If there is a scroll bar, the returned value is subtracted from the width or height occupied by the scroll bar. (i.e. not including scrollbars)

// Browser viewport height
document.documentElement.clientHeight

// Total height of the page
document.body.clientHeight
Copy the code

Element. ClientLeft Element. ClientTop

Returns the left and top border widths of the element, or 0 if there is no border.

Inline elements are also not supported.

(I’m not sure what these two attributes do…)

Element. ScrollHeight Element. ScrollWidth

Returns the total height and width of the current element, including portions that overflow the container and are not currently visible.

Includes the padding area.

Includes the width and height of the pseudo-element.

Does not contain the width and height of the scroll bar.

Let’s use a small demo to help understand:

<div class="box"> 666 </div>
Copy the code
.box {
  width: 200px; height: 200px; overflow: hidden;
  border: 1px solid red; padding: 10px; position: relative;
}
.box::after {
  position: absolute; content: ' ';
  width: 100px; height: 100px; left: 100%;
}
Copy the code
let box = document.querySelector('.box')
console.log(box.scrollWidth) / / 320
console.log(box.scrollHeight) / / 220
Copy the code

You can see that the scrollHeight of the box element is 220, which is consistent with “including the padding area”.

Why is the scrollWidth of the box element 320? Because of the position and width of the pseudo-element, the pseudo-element overflow is hidden, but the value returned by this attribute still includes it.

Not only its width and height, but also its position.

For example, change the CSS of the fake element:

.box::after {
  position: absolute; content: ' ';
  width: 100px; height: 100px;
  left: 120%; top: 120%;
}
Copy the code

Now do you want to guess what the scrollWidth and scrollHeight of the box are?

Element. ScrollLeft Element. ScrollTop

Read-write. Setting the value of this property causes the browser to automatically scroll the current element to the appropriate location.

Returns the horizontal and vertical scrolling distance of the current element, respectively.

For web elements that do not have scroll bars, these two properties are always equal to 0.

To see the horizontal and vertical scrolling distances for the entire page, read from the document.documentElement element.

document.documentElement.scrollLeft
document.documentElement.scrollTop
Copy the code

Element offsetHeight, Element. OffsetWidth

Returns the height and width of the element, including the height and width of the element itself, the padding and border, and the height and width of the scroll bar.

If the display element is None, 0 is returned.

I think this is a bit more useful for attributes than clientHeight and clientWidth, because more often than not we need to get the full width and height of the element.

Element. The offsetLeft, Element. OffsetTop

Returns the horizontal and vertical displacement of the upper-left corner of the current Element relative to the element.offsetParent node.

Speaking of which, let’s look at element.offsetparent:

The element. offsetParent property returns the upper Element that is closest to the current Element and whose CSS position property is not equal to static.

The offsetParent property returns NULL if the element is invisible (the display property is None) or if the position property is fixed (the position property is fixed).

The element. offsetParent attribute points to an Element if the position attribute of all the upper nodes of the Element is static.

Excerpt from “Ruan Yifeng JavaScript Tutorial”

Relevant methods

Element.getBoundingClientRect()

Returns an object that provides information about the size, position, and so on of the current element.

I usually use it to get the width, height and coordinates of elements.

This object has the following properties:

  • width
  • height
  • The abscissa of the upper left corner of the X element relative to the viewport
  • y
  • left
  • right
  • top
  • bottom

Because the position of the element relative to the viewport changes as the page scrolls, none of the four attribute values representing the position is fixed. To get the absolute position, add the left attribute to window.scrollX and the top attribute to window.scrollY.

Excerpt from “Ruan Yifeng JavaScript Tutorial”

Four mouse events

MouseEvent interface

let event = new MouseEvent('click', {
    // ...
})
Copy the code

The event object generated by the click event added via addEventListener is also an instance of MouseEvent.

let box = document.querySelector('.box')

box.addEventListener('click', (e) => {
  console.log(e) // Event object
})
Copy the code

This event object, the MouseEvent instance, has a number of properties that we’ll examine briefly.

MouseEvent. ClientX and MouseEvent. ClientY

Read-only property

Returns the horizontal and vertical coordinates of the mouse position relative to the top left corner of the browser window, respectively. (Not affected by rolling distance)

It can be interpreted as follows:

The web client is the browser, so clientX and clientY are relative to the browser.

The two properties also have aliases mouseEvent. x and MouseEvent.y, respectively.

MouseEvent screenX, MouseEvent. ScreenY

Read-only property

Returns the horizontal and vertical coordinates of the mouse position relative to the top left corner of the screen (display screen area), respectively.

“Screen” means a screen, so, you know.

MouseEvent offsetX, MouseEvent. OffsetY

Read-only property

Returns the horizontal and vertical distance of the mouse position relative to the upper-left padding edge of the target node (the current element), respectively.

Offset refers to the offset of the mouse position relative to the upper left corner of the target element, regardless of the target element itself or the external elements.

So what does “padding edge” mean?

Let’s talk about this:

The three elements in the figure above are distinguished by red, blue and green borders. The red and blue borders are 1px wide and the green borders are 30px. Each element has a padding value. The specific code is as follows:

<! -- HTML -->
<body>
  <div class="parent">
    <div class="hello">Hello</div>
  </div>
</body>
Copy the code
/* css */
body {
  border: 1px solid red; margin: 0; padding: 20px;
}
.parent {
  border: 1px solid blue; padding-top: 50px;
}
.hello {
  width: 100px; height: 100px; padding: 100px; border: 30px solid green;
}
Copy the code

Let’s add a click time listener to the Hello element:

// js
let hello = document.querySelector('.hello')

hello.addEventListener('click', (e) => {
  console.log(e)
  console.log(e.offsetX)
  console.log(e.offsetY)
})

Copy the code

If you click on the green border of the Hello element and the white space, you’ll see that the former is a negative number and the latter is an integer, both computed from the upper left corner of the white space.

This is what we mean by “the horizontal and vertical distance between the mouse position and the top left padding edge of the target node (i.e. the current element).”

MouseEvent pageX, MouseEvent. PageY

Read-only property

Returns the distance of the mouse position relative to the upper left corner of the document, respectively. (including rolling distance)

MouseEvent movementX, MouseEvent. MovementY

Read-only property

Returns the horizontal and vertical distance between the current position and the last Mousemove event.

It’s obvious that these two properties are closely related to mousemove events, so let’s take a look at mousemove events:

Triggered when the mouse moves within a node. This event is triggered continuously when the mouse continues to move. To avoid performance problems, it is recommended to restrict the listener function of this event to run only once in a period of time.

This should involve “throttling,” but I won’t go into that.

These two attributes are still very useful, although I haven’t used it very much, but now I think it can be used to determine the direction of the mouse movement, etc.

Reference links:

Window object – WangDoc.com

Element node – WangDoc.com

Mouse Events – WangDoc.com

(after)