HTML DOM getBoundingClientRect() Method

The HTML DOM getBoundingClientRect() Method returns the relative positioning to the viewport. It returns 8 properties: left, top, right, bottom, x, y, width, and height. Scrolling will change the position value. 

Syntax:

let rect = div.getBoundingClientRect();

Parameter: This method doesn't accept any parameters.

Return Values: This method will return the DOMRect object that depicts the smallest rectangle containing the whole element, including its padding and border-width. The position and size of the rectangle can be described with the help of left, top, right, bottom, x, y, width, and height properties( in pixels ). Except for the width & height properties, the rest properties are relative to the top-left of the viewport.

Example: This example describes the basic usage of the getBoundingClientRect() Method in HTML DOM.

Output:

Example 2: This is another example that illustrates the getBoundingClientRect() Method in HTML DOM.

Output:

Supported Browsers:

• Chrome 2.0 and above
• Edge 12 and above
• Internet Explorer 4.0 and above
• Firefox 3.0 and above
• Opera 9.5 and above
• Safari 4.0 and above