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.

Answer 1

botRightX = rect.left + rect.width

botRightY = rect.top + rect.height

Answer 2

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;

Answer 3

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

Answer 4

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.