javascript - Retrieve the position (X,Y) of an HTML element

ID : 463

viewed : 231

Tags : javascripthtmlcssdomposition

Top 5 Answer for javascript - Retrieve the position (X,Y) of an HTML element

vote vote

94

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),     elemRect = element.getBoundingClientRect(),     offset   = elemRect.top - bodyRect.top;  alert('Element is ' + offset + ' vertical pixels from <body>'); 
vote vote

88

The libraries go to some lengths to get accurate offsets for an element.
here's a simple function that does the job in every circumstances that I've tried.

function getOffset( el ) {     var _x = 0;     var _y = 0;     while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {         _x += el.offsetLeft - el.scrollLeft;         _y += el.offsetTop - el.scrollTop;         el = el.offsetParent;     }     return { top: _y, left: _x }; } var x = getOffset( document.getElementById('yourElId') ).left;  
vote vote

77

This function returns an element's position relative to the whole document (page):

function getOffset(el) {   const rect = el.getBoundingClientRect();   return {     left: rect.left + window.scrollX,     top: rect.top + window.scrollY   }; } 

Using this we can get the X position:

getOffset(element).left 

... or the Y position:

getOffset(element).top 
vote vote

62

If you want it done only in javascript, here are some one liners using getBoundingClientRect()

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y  window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X 

The first line will return offsetTop say Y relative to document. The second line will return offsetLeft say X relative to document.

getBoundingClientRect() is a javascript function that returns the position of the element relative to viewport of window.

vote vote

55

HTML elements on most browsers will have:-

offsetLeft offsetTop 

These specifiy the position of the element relative its nearest parent that has layout. This parent can often be accessed bif the offsetParent property.

IE and FF3 have

clientLeft clientTop 

These properties are less common, they specify an elements position with its parents client area (padded area is part of the client area but border and margin is not).

Top 3 video Explaining javascript - Retrieve the position (X,Y) of an HTML element

Related QUESTION?