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

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:

My Personal Notes

Recommended Posts: