finding top and left values of DIV without setting stylesheet values

Question

I'm making a drawing application which involves clicking in a div box and reading co-ordinate values. The problem with it so far is that the coordinate values aren't correct relative to the box.

Here's my setup.. the drawing application starts off by loading simple HTML and then a DIV exclusively for drawing. Then I use a click handler to detect a click and return co-ordinates.

The width and height return fine because I defined them for the DIV, but the top and left positions return NaN in javascript.

I know I can easily do this with using css property position="absolute" for the DIV and specifying left and top that way, but that would wreck the rest of the HTML document because then the whole thing would look out of place.

Is there a way I can get a top and left value of DIV without explicitly specifying the two values for the DIV?

I want to achieve this with simple javascript. No jquery.

Have a look at - http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element — Harsh Moorjani, Jun 22 '14 at 18:15

Roko C. Buljan · Accepted Answer · 2014-06-22T20:21:48.667

0

jsBin demo

function getXY( ev ){
  var gbc = this.getBoundingClientRect(),
      X = ev.clientX - gbc.left,
      Y = ev.clientY - gbc.top;
  alert( X +' '+ Y);
}

document.getElementById('board').onclick = getXY;

enter image description here

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
https://developer.mozilla.org/en-US/docs/Web/API/event.clientY

edited Jun 22 '14 at 20:21

answered Jun 22 '14 at 18:13

Roko C. Buljan

196,159
39
305
313

1

I never thought I had to go to the extent of using getBoundingClientRect() to get the coordinates, but thanks. – Jun 22 '14 at 19:49

finding top and left values of DIV without setting stylesheet values

1 Answers1