Get element at specified position - JavaScript

Asked
Active3 hr before
Viewed126 times

7 Answers

javascriptpositionelement
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Meta Stack Overflow , GitLab launches Collective on Stack Overflow ,To get the topmost element at a specific position relative to the viewport, document.elementFromPoint(x, y) can be used.

document.elementFromPoint(x, y);
load more v
88%

If you need to find the specific position inside the element, use Document.caretPositionFromPoint(). ,The topmost Element object located at the specified coordinates., The elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport). , If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is null.

elementFromPoint(x, y)
load more v
72%

In this article, we’ll look at how to get the elements at the specified position with JavaScript.,Sometimes, we want to get the element at the specified position with JavaScript., No Comments on How to Get the Element at the Specified Position with JavaScript? ,Sometimes, we want to run JavaScript code when an element loses focus. In this article,…

For instance, if we have the following div element:

<div>
   hello world
</div>
load more v
65%

Step 2: Finding the position of the element: To get the location of any HTML element in the (x, y) coordinate format, there are two document properties which are used: ,Combining both these properties into one to get the code for calculating the coordinates for an HTML element is given as follows: ,The getElementsByClassName() Method,The getElementsByName() Method

load more v
75%

The getPosition function takes a reference to an HTML element in your document as its argument. It returns an object containing an x property and a y property.,Our function is called getPosition, and it takes an argument called element. As you saw from the example usage, the element in question is a reference to an HTML element that lives in your DOM. Preferably, it is the HTML element whose position you are curious about as well.,Here is our getPosition function again:,The code for getting the X and Y position of an HTML element is provided below:

The code for getting the X and Y position of an HTML element is provided below:

// Helper function to get an element's exact position
function getPosition(el) {
   var xPos = 0;
   var yPos = 0;

   while (el) {
      if (el.tagName == "BODY") {
         // deal with browser quirks with body/window/document and page scroll
         var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
         var yScroll = el.scrollTop || document.documentElement.scrollTop;

         xPos += (el.offsetLeft - xScroll + el.clientLeft);
         yPos += (el.offsetTop - yScroll + el.clientTop);
      } else {
         // for all other non-BODY elements
         xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
         yPos += (el.offsetTop - el.scrollTop + el.clientTop);
      }

      el = el.offsetParent;
   }
   return {
      x: xPos,
      y: yPos
   };
}

// deal with the page getting resized or scrolled
window.addEventListener("scroll", updatePosition, false);
window.addEventListener("resize", updatePosition, false);

function updatePosition() {
   // add your code to update the position when your browser
   // is resized or scrolled
}
load more v
40%

Using Javascript how can I identify the element at a given position? Basically I'm looking to write a function that takes two input parameters (the x and y coordinates) and returns the html element at the position on the screen represented by the parameters.,To obtain an array of all the elements at a specific position, use document.elementsFromPoint(x, y).,To get the topmost element at a specific position relative to the viewport, document.elementFromPoint(x, y) can be used.,You can use the native JavaScript elementFromPoint(x, y) method, that returns the element at coordinates x,y in the viewport.

Answer #1:

document.elementFromPoint(x, y);
load more v
22%

The following function returns the co-ordinates for the element with the id passed in as a string:,To get the co-ordinates of the following div:,The offset co-ordinates are …,jQuery: Mouse co-ordinates within the element when mouseover or click an element

The following function returns the co-ordinates for the element with the id passed in as a string:

function getElementTopLeft(id) {

   var ele = document.getElementById(id);
   var top = 0;
   var left = 0;

   while (ele.tagName != "BODY") {
      top += ele.offsetTop;
      left += ele.offsetLeft;
      ele = ele.offsetParent;
   }

   return {
      top: top,
      left: left
   };

}
load more v

Other "javascript-position" queries related to "Get element at specified position - JavaScript"