javascript - finding top and left values of DIV without setting stylesheet values -

javascript - finding top and left values of DIV without setting stylesheet values -

i'm making drawing application involves clicking in div box , reading co-ordinate values. problem far coordinate values aren't right relative box.

here's setup.. drawing application starts off loading simple html , div exclusively drawing. utilize click handler observe click , homecoming co-ordinates.

the width , height homecoming fine because defined them div, top , left positions homecoming nan in javascript.

i know can using css property position="absolute" div , specifying left , top way, wreck rest of html document because whole thing out of place.

is there way can top , left value of div without explicitly specifying 2 values div?

i want accomplish simple javascript. no jquery.

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;

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

javascript html css tags