How to get top left x and y coordinate using javascript

Question

I know that we can get the width and height using clientWidth and clientHeight, however, how can I determine the top left and top left positions of an element?

Answer 1

function findPosX(obj) { var curleft = 0; if(obj.offsetParent) while(1) { curleft += obj.offsetLeft; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if(obj.offsetParent) while(1) { curtop += obj.offsetTop; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.y) curtop += obj.y; return curtop; } 

Get the position (X, Y) of an HTML element

Find X / Y HTML element with JavaScript

These two links should be helpful.

Answer 2

To get the top, you need to add the offsetTop element and the element offsetParent offsetTop . Do this before the DOM to document . This explains the absolute, relative and fixed positioning. To the left, do the same with offsetLeft .

These two functions add two properties to the Element , documentOffsetTop and documentOffsetLeft , which will receive the top / left side of any element:

 window.Object.defineProperty( Element.prototype, 'documentOffsetTop', { get: function () { return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 ); } } ); window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', { get: function () { return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 ); } } ); 

This demo shows several combinations of layout elements by comparing documentOffsetTop with jQuery offset().top .

Demo: http://jsfiddle.net/ThinkingStiff/3G7EZ/

Script:

 window.Object.defineProperty( Element.prototype, 'documentOffsetTop', { get: function () { return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 ); } } ); var line = document.getElementsByClassName( 'grid-line' )[0], grid = document.getElementById( 'grid' ); for( var index = 2; index < 100; index++ ) { var copy = line.cloneNode(); copy.textContent = ( index * 10 ); grid.appendChild( copy ); }; var offset = document.getElementById( 'absolute' ); offset.textContent = 'absolute: ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.getElementById( 'static' ); offset.textContent = 'static: ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.getElementById( 'static2' ); offset.textContent = 'static: ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.getElementById( 'relative' ); offset.textContent = 'relative: ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.getElementById( 'fixed-side' ); offset.textContent = 'fixed/absolute (side): ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.getElementById( 'fixed-top' ); offset.textContent = 'fixed/absolute (top): ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.getElementById( 'fixed-bottom' ); offset.textContent = 'fixed/absolute (bottom): ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.querySelectorAll( '#relative-wrapped-absolute div' )[0]; offset.textContent = 'absolute/relative/static (absolute/relative wrapped): ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; offset = document.querySelectorAll( '#static-wrapped-static div' )[0]; offset.textContent = 'static (static wrapped): ' + offset.documentOffsetTop + ', $' + $( offset ).offset().top; 

HTML:

 <div id="static" class="offset">0</div> <div id="static2" class="offset">0</div> <div id="static-wrapped-static"><br /><div class="offset">0</div></div> <div id="absolute" class="offset">0</div> <div id="relative" class="offset">0</div> <div id="fixed-side" class="offset">0</div> <div id="fixed-top" class="offset">0</div> <div id="fixed-bottom" class="offset">0</div> <div style="position: relative;"><div id="relative-wrapped-absolute"><div class="offset">0</div></div></div> <div id="grid"><div class="grid-line">10</div></div> 

CSS

 body {padding-left: 12px;} #absolute { top: 100px; position: absolute; } #relative { top: 150px; position: relative; } #fixed-side { right: 0; position: fixed; } #fixed-top { left: 50%; position: fixed; top: 0; } #fixed-bottom { left: 50%; position: fixed; bottom: 0; } #relative-wrapped-absolute { top: 8px; position: relative; } #relative-wrapped-absolute div { position: absolute; top: 20px; } .offset { border: 1px solid black; } #grid { height: 100%; left: 0; position: absolute; top: 1px; width: 100%; z-index: -1; } .grid-line { border-bottom: 1px solid lightgray; font-size: 8px; height: 9px; line-height: 20px; } 

Output:

Answer 3

Using jQuery, you can do this by calling the .position () function. How:

 $('#mydiv').position().left; $('#mydiv').position().top; 

This is the most reliable way, since it already calculates the position that checks the CSS of the elements and its parents.

Here you can see the full implementation:

http://code.jquery.com/jquery-1.7.1.js on line 9077

Answer 4

You need x and y for a specific item.

 $("#bnElement").offset().left; $("#bnElement").offset().top; 

Just take a look at the following message jQuery xy document coordinates the DOM object is considering

Answer 5

Maybe this can help you.?!

HTML

  <div> <p>Hello</p> </div> <p></p> 

CSS

 div { padding: 50px;} p { margin-left:10px; } 

Js

  var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top ); 

Demo: http://jsfiddle.net/bZezzz/TvMMv/

Answer 6

Using the querySelectorAll () Method

  var domTree = []; var allelems = document.querySelectorAll(tagsCheck ); // for all tags use --> '*' for(var i = 0; i < allTags.length; i++){ console.log(i+' '+'Tag : '+ allTags[i].nodeName+'#'+allTags[i].id); // getPath(allTags[i]); getPosition(allTags[i]); console.log('Coordinates : {top : '+allTags[i].getBoundingClientRect().top+', left : '+allTags[i].getBoundingClientRect().left+' } '); console.log('Dimensions offset : {width : '+allTags[i].offsetWidth+', height : '+allTags[i].offsetHeight+' } '); console.log('Dimensions style Q : {width : '+allTags[i].style.width+', height : '+allTags[i].style.height+' } '); var singleTag = []; var jsonData = getTagInfo(allelems[i]); //singleTag.push(getFullXPath(allelems[i])); singleTag.push(jsonData); domTree.push(singleTag); console.log(singleTag); } function getTagInfo(element){ return '{ \"Xpath\": \"'+ getFullXPath(element) + '\", \"left\": '+element.getBoundingClientRect().left+',\"top\": '+element.getBoundingClientRect().top+ ',\"width\": '+element.offsetWidth+',\"height\" : '+element.offsetHeight+'}'; } 

Using getElementsByTagName () and getComputedStyle ()

 function getElementDimensions(tagsCheck){ var allElem = document.getElementsByTagName('*'); for(i = 0, j = 0; i < allElem.length; i++) { var elemstyle= window.getComputedStyle(allElem[i], null); if( tagsCheck.indexOf( allElem[i].tagName ) > -1 ){ console.log(i+' '+'Tag : '+allElem[i].tagName+'[@id : '+allElem[i].id); console.log('Dimensions style E : {width : '+elemstyle.width+', height : '+elemstyle.height+' } '); } } } 

position and XPath of an HTML element

 function getPosition(element){ var xPosition = 0; var yPosition = 0; while(element) { xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); yPosition += (element.offsetTop - element.scrollTop + element.clientTop); element = element.offsetParent; } console.log('GetPosition : {top : '+yPosition+', left : '+xPosition+' } '); } 

Answer 7

I really liked the jquery.simulate implementation

 function findCorner(elem) { var offset, document = $(elem.ownerDocument); elem = $(elem); offset = elem.offset(); return { x: offset.left - document.scrollLeft(), y: offset.top - document.scrollTop() }; } 

seems to capture a lot of scenarios. it brings you position relative to the screen. Therefore, if I scroll, some items may be in a negative position. which is useful for automated tests that use drag and drop.

You can easily wrap it with jquery for cool syntax like:

 $.fn.findCorner = function(){ if ( this.length > 1 ) { return this.map(function(){ return findCorner(this); }) } else { return findCorner(this[0]); } }; 

etc. $('div').findCorner() ..