Text Position Retrieval on Webpage
To find where a particular text is on a webpage, we can use the getBoundingClientRect() method. This method tells us about the size of the text and where it is located on the screen when the mouse hovers over it, providing both X and Y coordinates.
Example 2: This example shows by moving the pointer over the document to get the position of an element.
html
<!DOCTYPE html> < html > < head > < title > Retrieve the position (X,Y) of an element </ title > <!-- scropt to get position --> < script type = "text/javascript" > function getPositionXY(element) { let rect = element.getBoundingClientRect(); document.getElementById('text').innerHTML = 'X: ' + rect.x + '< br >' + 'Y: ' + rect.y; } </ script > </ head > < body > < h3 >Retrieve the position (X,Y) of an element using HTML</ h3 > < p >Move the mouse over the text</ p > < div onmouseover = "getPositionXY(this)" > Position: < p id = 'text' ></ p > </ div > </ body > </ html > |
Output:
Retrieve the position (X,Y) of an element using HTML
The position of (X, Y) means the coordinate of an element at the top-left point in a document. X represents the horizontal position and Y represents the vertical position. Use element.getBoundingClientRect() property to get the position of an element.
Table of Content
- Button Position Retrieval on Webpage
- Text Position Retrieval on Webpage