How to get the bottom right corner of a div?

Question

i have a div of static width and height and i want to know its bottom right corner so that i can use it for top and left of another div

so basically the coordinates of the marked point in the image below,

i have tried to bottom = rect.top + rect.height; right = rect.top + rect.height; i dont think above is correct. could someone help me get the bottom right corner of the div.thanks.

Does this answer your question? [Get the position of a div/span tag](https://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag) — Reyedy, Nov 22 '19 at 14:36

score 1 · Answer 1 · answered Nov 22 '19 at 14:39

You should use getBoundingClientRect. This function returns the size of an element and its position relative to the viewport.

document.getElementById('foo').getBoundingClientRect();
// =>  {
//       top: Number,
//       left: Number,
//       right: Number,
//       bottom: Number,
//       x: Number,
//       y: Number,
//       width: Number,
//       height: Number,
//     }

From there I think you can do some simple math to get the bottom right corner.

Link: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

score 0 · Accepted Answer · answered Nov 22 '19 at 14:36

0

botRightX = rect.left + rect.width

botRightY = rect.top + rect.height

answered Nov 22 '19 at 14:36

Janine Rawnsley

1,240
2
10
20

score 0 · Answer 3 · answered Nov 22 '19 at 14:37

You could use the .offsetHeight and .offsetWidth properties to get the height and the width of you first div. Like this:

var height = document.getElementById('yourDivId').offsetHeight;

and

var width = document.getElementById('yourDivId').offsetWidth;

score 0 · Answer 4 · answered Nov 22 '19 at 14:39

0

const boundingRect = div.getBoundingClientRect();

const bottom = div.bottom - div.top;
const right = div.right - div.left;

Assuming that div is the element you want to target.

answered Nov 22 '19 at 14:39

Freez

7,208
2
19
29

How to get the bottom right corner of a div?

4 Answers4