Article Categories

Selected Reading

JavaScript code to find the coordinates of every link in a page

Javascript Web Development Object Oriented Programming

JavaScript provides several methods to find the position and coordinates of elements on a page. For links, we can use properties like offsetLeft, offsetTop, offsetWidth, and offsetHeight to get their position and dimensions.

Understanding Element Coordinates

In JavaScript, element coordinates are measured from the top-left corner of the page:

offsetLeft - Distance from the left edge of the page
offsetTop - Distance from the top edge of the page
offsetWidth - Width of the element including padding and borders
offsetHeight - Height of the element including padding and borders

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Find Link Coordinates</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
   }
   .result {
      font-size: 16px;
      font-weight: 500;
      background-color: #f0f0f0;
      padding: 10px;
      margin: 20px 0;
   }
   a {
      display: block;
      margin: 10px 0;
      padding: 5px;
   }
   button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
   }
</style>
</head>
<body>
<h1>Coordinates of every link in a page</h1>
<div class="result"></div>

<a href="https://www.google.com">Google</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.yahoo.com">Yahoo</a>

<button class="btn">Get Link Coordinates</button>

<script>
   let resultElement = document.querySelector(".result");
   let buttonElement = document.querySelector(".btn");
   let links = document.getElementsByTagName("a");

   buttonElement.addEventListener("click", () => {
      resultElement.innerHTML = "<h3>Link Coordinates:</h3>";
      
      for (let i = 0; i < links.length; i++) {
         let link = links[i];
         let linkText = link.textContent;
         
         resultElement.innerHTML += 
            `<p><strong>${linkText}:</strong><br>` +
            `X Position: ${link.offsetLeft}px, Y Position: ${link.offsetTop}px<br>` +
            `Width: ${link.offsetWidth}px, Height: ${link.offsetHeight}px</p>`;
      }
   });
</script>
</body>
</html>

Alternative Method Using getBoundingClientRect()

For more precise positioning relative to the viewport, you can use getBoundingClientRect():

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link Coordinates with getBoundingClientRect</title>
</head>
<body>
<a href="#">Sample Link 1</a>
<a href="#">Sample Link 2</a>
<button onclick="findCoordinates()">Find Coordinates</button>
<div id="output"></div>

<script>
function findCoordinates() {
   let links = document.querySelectorAll('a');
   let output = document.getElementById('output');
   output.innerHTML = '';
   
   links.forEach((link, index) => {
      let rect = link.getBoundingClientRect();
      output.innerHTML += 
         `<p>Link ${index + 1}: ` +
         `Left: ${Math.round(rect.left)}px, ` +
         `Top: ${Math.round(rect.top)}px, ` +
         `Width: ${Math.round(rect.width)}px, ` +
         `Height: ${Math.round(rect.height)}px</p>`;
   });
}
</script>
</body>
</html>

Key Differences

Method	Reference Point	Includes Scrolling
`offsetLeft/Top`	Document	No
`getBoundingClientRect()`	Viewport	Yes

Conclusion

Use offsetLeft and offsetTop for absolute positioning within the document, or getBoundingClientRect() for viewport-relative coordinates. Both methods effectively retrieve link coordinates for various positioning needs.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

230 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next