How to get HTML element X, Y position using JavaScript

There are two simple methods that you can use in JavaScript to get the X and Y coordinates of an HTML element. The first method that I have shared uses the offsetLeft and offsetTop properties and second method uses the built-in getBoundingClientRect() method in JavaScript.

Using offsetLeft and offsetTop properties

Here's an example.

I have a DIV element, which is draggable. Drag the element anywhere on web page and drop it. Next, click the element to get the X and Y coordinates.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <style>
      #theText { 
        width: 200px;
        padding: 10px; 
        border: solid 1px #ddd;
        cursor: move;
      }
    </style>
</head>

<body>
  <h2>Drag the text and stop. Then click text to get its X and Y coordinates.</h2>
  
  <!--will get the X and Y position of this element-->
  <div id='theText'>
    some content here...
  </div>
  
  <p id="coord"></p>    <!--show x, y coordinates here.-->
</body>

<script>
    window.addEventListener('click', function (e) {
        if (e.target.id == 'theText') {
            document.getElementById('coord').innerHTML = 'X: ' + e.target.offsetLeft +
                ' Y: ' + e.target.offsetTop;
        }
    });

    $(document).ready(function () {
        $(function () {
            $('#theText').draggable({});
        });
    });
</script>
</html>

Try it

Using getBoundingClientRect() Method

You can also use .getBoundingClientRect() method to get the X and Y coordinates of an element. However, "getBoundingClientRect()" will return values relative to the "viewport".

For example,

<!DOCTYPE html>
<html>
<head>
  
<style>
  * { font-family: Calibri; }
  div, p { font-size: 18px; }
  
  body { height: 2000px; }
  
  #theText { 
    width: 200px; 
    padding: 10px; 
    border: solid 1px #ddd;
    position: absolute;
    bottom: 2%;
    left: 40%;
  }
  
  p { position: fixed; } 
  #coord1 { top: 50px; }
</style>
</head>

<body>
  <h2>Scroll this page up and down</h2>

  <div id='theText'>
    some content here...
  </div>
  
  <!--show x, y coordinates-->
  <p id="coord"></p>
  <p id="coord1"></p>
</body>

<script>
    window.addEventListener('scroll', function (e) {
        document.getElementById('coord').innerHTML =
            'X: ' + theText.offsetLeft + ' Y: ' + theText.offsetTop;

        document.getElementById('coord1').innerHTML =
            'X: ' + theText.getBoundingClientRect().left + 
            ' Y: ' + theText.getBoundingClientRect().top;
    });
</script>
</html>

Try it

Articles you don't want to miss 👇 • What is map() function in JavaScript? Benefits of using map() function in your application.
• How to get the X character (any particular character) in a string using JavaScript
• How to create a simple CRUD application using plain JavaScript
• How to use .map() function to extract only numbers from an array of values in JavaScript?

← PreviousNext →