How To Get The X and Y Position of HTML Elements in JavaScript and jQuery

When developing web applications, it may be necessary to get the X and Y position of HTML elements on the page for a variety of purposes, such as positioning other elements relative to the target element or triggering events based on the element’s location. In this article, we will explore how to get the X and Y position of HTML elements in JavaScript and jQuery.

The Freelance Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets All starting at only $16.50 per month

DOWNLOAD NOW

Getting the X and Y Position in JavaScript

To get the X and Y position of an HTML element in JavaScript, we can use the getBoundingClientRect() method. This method returns an object with properties that describe the position of the element relative to the viewport.

Here’s an example of how to get the X and Y position of an element with the ID “myElement” using JavaScript:

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const x = rect.left + window.scrollX;
const y = rect.top + window.scrollY;

In this example, we first get a reference to the element using getElementById(). We then call the getBoundingClientRect() method on the element, which returns an object with properties such as left, top, right, and bottom. The left and top properties describe the X and Y position of the element relative to the viewport.

Note that the left and top properties returned by getBoundingClientRect() are relative to the top-left corner of the viewport, not the top-left corner of the document. To get the absolute position of the element, we need to add the current scroll position of the window to the left and top values using window.scrollX and window.scrollY, respectively.

Getting the X and Y Position in jQuery

In jQuery, we can use the offset() method to get the X and Y position of an HTML element. This method returns an object with properties that describe the position of the element relative to the document.

Here’s an example of how to get the X and Y position of an element with the ID “myElement” using jQuery:

const element = $('#myElement');
const x = element.offset().left;
const y = element.offset().top;

In this example, we first get a reference to the element using the jQuery selector $('#myElement'). We then call the offset() method on the element, which returns an object with properties such as left and top. The left and top properties describe the X and Y position of the element relative to the document.

Note that the offset() method returns the position of the element relative to the document, not the viewport. If you want to get the position of the element relative to the viewport, you can subtract the current scroll position of the window using $(window).scrollLeft() and $(window).scrollTop(), respectively. Here’s an example:

const element = $('#myElement');
const offset = element.offset();
const x = offset.left - $(window).scrollLeft();
const y = offset.top - $(window).scrollTop();

Like the previous example, we first get a reference to the element using the jQuery selector $('#myElement'), then call the offset() method on the element, which returns an object with properties such as left and top. The left and top properties describe the X and Y position of the element relative to the document.

The, to get the position of the element relative to the viewport, we subtract the current scroll position of the window using $(window).scrollLeft() and $(window).scrollTop(), respectively. This gives us the X and Y position of the element relative to the viewport.

Note that the scrollLeft() and scrollTop() methods return the number of pixels that the document is currently scrolled from the left and top edges, respectively. Subtracting these values from the offset of the element gives us its position relative to the viewport.