Size 1.

(1) the node. The style. The width/height

This can only get dimensions defined in the inline style of the element, or an empty string if the element has no style attribute defined

In addition, there is no other way to get the element size values of the CSS style Settings

(2) node. ClientWidth/clientHeight

Represents the visual width/height + horizontal/vertical padding of the element’s content

Note:

  • For pure inline elements (such as APAN, excluding inline blocks), this neI is always 0,
  • Through document documentElement. ClientWidth page/clientHeight can obtain the size of the viewport

(3) the node. The offsetWidth/offsetHeight

Represents the element’s content visual width/height + horizontal/vertical padding + horizontal/vertical barder value

(4) node. ScrollWidth/scrollHeight

Represents the visible width/height of the element’s content + the horizontal/vertical padding value + the width/height of the scroll or overflow part of the content horizontally/vertically

This value is the same as the corresponding ciientWidth/clientHeight when there is no scroll overflow

Note:

  • For pure inline elements (such as span, excluding inline blocks), the API always gets a value of 0.
  • Through document documentElement. ScrollWidth page/scrollHeight can obtain the size of the viewport

(5) the window. The innerWidth/innerHeight and outerWidth/outerHeight

Window. The innerWidth/innerHeight said that the current viewport width/height of the page, generally with the document documentElement. ClientWidth/clientHeight are equivalent

Window. OuterWidth/outerHeight said the whole of the browser window width/height, that is, you open the browser software shows that the width/height

In the case of an ideal viewport on the mobile side, the innerWidth and outerWidth are generally equal

(6) the window. The screen. The width/height/availWidth/availHeight

Screen.width /height Returns the CSS pixel value for the screen width/height

Screen. AvailWidth/availHeight return current browsers available in the screen width/height CSS pixel values. Or the maximum possible width/height of the browser in its current state

Screen.width is not necessarily equal to screen.availWidth. When other gadgets take up screen space, the browser sometimes can’t take up the space that gadgets (like the taskbar) take up.

(7) node. GetBoundingClientRect ()

The return value of this method is an object with width and height dimensions

For a standard box model, the size of the element is equal to the sum of width/height + padding + border-width.

If box-sizing: border-box, the element size is equal to width/height.

Position 2.

(1) event.pageX/Y, screenX/Y, clientX/Y

These attributes only come from the DOM Event object

PageX /Y represents the position of the event trigger relative to the upper left corner of the overall page (including the page scroll distance)

ScreenX /Y represents the position of the event trigger relative to the upper-left corner of the screen

ClientX /Y represents the position of the event trigger relative to the upper-left corner of the visible area of the current page

(2) node. OffsetTop/offsetLeft

Represents the position of the top/left margin of the current node relative to the nearest located ancestor element

(3) the node. The scrollTop/scrollLeft

Represents the vertical/horizontal distance to be scrolled inside the current node element, if a scrollbar is generated inside the element, otherwise returns 0

(4) node. Style. Left/top

This only gets the value of the left/top attribute defined in the inline style of the element, or an empty string if the element has no style attribute defined

(5) node. GetBoundingClientRect ()

It returns an object containing the left, right, top, and bottom attributes, which correspond to how far the upper left and lower right corner of the element is relative to the upper left corner of the viewPort.