×

Index

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

Retrieve the position (XY) of an HTML element

Learn how to retrieve the position (XY) of an HTML element using JavaScript?
Submitted by Shahnail Khan, on April 01, 2022

At times there's a need to know the exact position of an element in HTML to make our websites responsive. The position refers to x & y coordinates. We can find the coordinates of an element at the top-left point in a document using JavaScript.

Let's say, the coordinate of an element is (25,6). Here, X=25 represents the horizontal position and Y=6 represents the vertical position.

Retrieve the position (XY) of an HTML element using JavaScript

We use XY.getBoundingClientRect() method in JavaScript to retrieve the position (XY) of an HTML element.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Position(XY)</title>
      <!-- JavaScript code to retrieve position of an element -->
      <script>
         function Position(XY) {
             var pos = XY.getBoundingClientRect();
             document.getElementById('container').innerHTML ='X= ' + pos.x + ', ' + 'Y= ' + pos.y
         }
      </script>
   </head>

   <style>
      img{
      display: flex;
      align-items: center;
      }
   </style>

   <body>
      <div id="container"></div>
      <h2 class="click" onclick="Position(this)">IncludeHelp</h2>
      <nav class="topics" onclick="Position(this)">
         <a href="#">HTML</a>
         <a href="#">CSS</a>
      </nav>
      <img src="https://static.vecteezy.com/system/resources/thumbnails/000/180/409/small/software_enginner_1-01.png"
         onclick="Position(this)"/> 
   </body>
</html>

Output:

Retrieve the position (XY)

We can get the position of each element in the div container by clicking on a particular element in the output. For example, I clicked on the image and you can see its position is displayed at the top (X=8, Y=93.42500305175781).

JavaScript Examples »



Related Examples



Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.