Detailed explanation of the getBoundingClientRect() method in js

1. getBoundingClientRect() Analysis

The getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

grammar

rectObject = object.getBoundingClientRect();

value

rectObject.top: the distance from the top of the element to the top of the window;
rectObject.right: the distance from the right side of the element to the left side of the window;
rectObject.bottom: the distance from the bottom of the element to the top of the window;
rectObject.left: the distance from the left side of the element to the left side of the window;
rectObject.width: is the width of the element itself rectObject.height is the height of the element itself

Cross-browser compatibility

If you need better cross-browser compatibility, use window.pageXOffset and window.pageYOffset instead of window.scrollX and window.scrollY. Scripts that do not have access to these properties can use the following code:

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

Example

// rect is a DOMRect object with four properties: left, top, right, bottom Note: DOMRect is the standard name for TextRectangle or ClientRect, they are the same.
var rect = obj.getBoundingClientRect();

This is the end of this article about the detailed case of the getBoundingClientRect() method in js. For more relevant content about getBoundingClientRect() in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!