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:
.png)
.png)