sajad torkamani

The Element.getBoundingClientRect() method returns a DOMRect object that provides information about the size of a DOM element and its position relative to the viewport.

Information returned includes:

PropertyDescription
xThe x coordinate of the element’s origin (typically top-left corner) relative to the viewport.
yThe y coordinate of the element’s origin (typically the top-left corner) relative to the viewport.
widthThe width of the element. Includes any padding and border-width.
heightThe height of the element. Includes any padding and border-width.
topThe top coordinate of the element – typically the same as y, or y + height if height is negative.
rightThe right coordinate of the element – typically equal to x + width, or x if width is negative.
bottomThe bottom coordinate of the element – typically the same as y + height, or y if height is negative.
leftThe left coordinate of the element – typically the same as x, or x + width if width is negative.
Information included in Element.getBoundingClientRect

If you need to get the position of an element relative to the top-left corner of the document (instead of the viewport), add the current scrolling position (using window.scrollX and window.scrollY) to the top and left properties.

Sources

Tagged: JavaScript

Leave a comment

Your email address will not be published. Required fields are marked *