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

Difficulty Level : Hard
Last Updated : 10 Jan, 2019

The position of (X, Y) means the co-ordinate of an element at the top-left point in a document. X represent the horizontal position and Y represent the vertical position. Use element.getBoundingClientRect() property to get the position of an element.

Example 1:

<!-- HTML program to get (x, y) coordinate 
of an element relative to the viewport -->
<!DOCTYPE html>
<html>
    <head>
        <title>
            position of an element
        </title>
          
        <!-- JavaScript code to display position -->
        <script type="text/javascript">
          
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('gfg').innerHTML = 
                'X: ' + rect.x + ', ' + 'Y: ' + rect.y
            }
        </script>
    </head>
      
    <body>
          
        <!-- Click on button to get its co-ordinate -->
        <button id = 'button1' onclick = "getPositionXY(this)">
            Button 1
        </button>
          
        <button id = 'button1' onclick = "getPositionXY(this)">
            Button 2
        </button>
          
        <br><br>
        <button id = 'button1' onclick = "getPositionXY(this)">
            Button 3
        </button>
          
        <p id = 'gfg'></p>
      
    </body>
</html>                    

Output:

Example 2: In this example, move the pointer over the document to get the position of an element.

<!-- HTML program to show (x, y) of an 
element by dragging mouse over it -->
<!DOCTYPE html>
<html>
    <head>
        <title>
            position of an element
        </title>
          
        <!-- scropt to get position -->
        <script type = "text/javascript">
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('text').innerHTML 
                = 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
            }
        </script>
    </head>
      
    <body>
        <p>Move the mouse over the text</p>
          
        <div onmouseover = "getPositionXY(this)">
            Position:
            <p id = 'text'></p>
        </div>
      
    </body>
</html>                    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles