JavaScript DOM Element Position (Scroll Position Included)

To detect the position of a DOM element (for example, HTML div tag or p tag) in JavaScript is an interesting topic. In [1], [2], [3], and [4], there are discussion and code for detecting the position of a DOM elemenet. In [5], [6], [7], there are discussion and code for detecting the scroll position of a DOM element. In this post, sample code for detecting the DOM element position, including scroll position, will be shown.

Demo

Source Code for Demo (HTML):

position.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript DOM Element Position (Scroll Position Included) Example</title>
</head>
<body>

<div>There are 4 buttons in this page, try to click them to get position.</div>
<br style="line-height: 2em;"/>

<button onclick="javascript:onButtonClick(this)">click me to get my position(1)</button><br />
<br style="line-height: 20em;"/>
<div style="text-align: center;"><button onclick="javascript:onButtonClick(this)">click me to get my position(2)</button></div>
<br style="line-height: 20em;"/>
<button onclick="javascript:onButtonClick(this)">click me to get my position(3)</button><br />
<br style="line-height: 20em;"/>
<div style="text-align: center;"><button onclick="javascript:onButtonClick(this)">click me to get my position(4)</button></div>

<script src="position.js"></script>
</body>
</html>

Source Code for Demo (JavaScript):

position.js | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function getPosition( el ) {
  var body = document.documentElement || document.body;
  var scrollX = window.pageXOffset || body.scrollLeft;
  var scrollY = window.pageYOffset || body.scrollTop;
  _x = el.getBoundingClientRect().left + scrollX;
  _y = el.getBoundingClientRect().top + scrollY;
  return { top: _y, left: _x };
}

function onButtonClick(element) {
  alert("Poistion top: " + getPosition(element).top + "\nPosition left: " + getPosition(element).left);
}

The sample code above, however, is not complete. The code will not work if CSS margin property and absolute display property of a DOM element is set. For example, if the website designer uses the semi-fluid layout mentioned in this holy grail tutorial, the code above will not work because the margin and relative position is not taken into consideration in the sample code. The position function provided by jQuery in [11] will still work under such circumstance. I tried to trace the source code of jQuery in [10], but still cannot figure out how to do it. Maybe I will be back to this issue some time.

References:

[1]getBoundingClientRect method - Dottoro Web Reference
[2]Retrieve the position (X,Y) of an HTML element
[3]offsetLeft property JavaScript - Dottoro Web Reference
[4]Get real offset left/top of element with inline offsetparent

[5]JavaScript tutorial - Window size and scrolling
[6]scrollLeft property - Dottoro Web Reference
[7]How to get iframe scroll position in IE using Java Script?

[8]JavaScript tutorial - Browser specific referencing
[9]W3C DOM Compatibility - CSS Object Model View
[10]source code of jQuery .offset
[11].position() – jQuery API
[12].offset() – jQuery API
[13]Get the position of an element relative to the document
Powered by Github Pages, Pelican, pyScss.