How to get element whose offset top we are knowing using javascript

Question

Let's say we are knowing the offset top of a specific element and we want to get that element which is situated at that point, so is there any way to get it?.

For Example, we have DOM element having offset top = 6000, and we want to find that element situated at that offset top point.

Example:

  <ul>
     <li>first list</li>
     <li>second list</li>
     <li>third list</li>
  </ul>
  <h3>Skills:</h3>
      <p>This are my skills. xyz, abc, pqr</p>

Now here, let's say offsetTop of <p> element is 10 and we want that whole element means like <p>This are my skills. xyz, abc, pqr</p>, just by using it's offsetTop.

miile7 · Accepted Answer · 2020-12-07T17:08:22.730

The question for me seems to look for getting an element of a specific point. If so you can use document.elementFromPoint().

let x = 10;
let y = 140;

let el = document.elementFromPoint(x, y);
el.style.background = "red";
// or $(el).css("background", "red");

<ul>
   <li>first list</li>
   <li>second list</li>
   <li>third list</li>
</ul>
<h3>Skills:</h3>
<p>This are my skills. xyz, abc, pqr</p>

If you only want to go by the top offset, e.g. because you do not want to specify the x coordinate, you have to walk through your elements.

The red line shows the top offset to check. All elements that start before and end after this line are added and returned. They are shown with a blue background.

/**
 * Get all children that start before `offset_top` and end after 
 * `offset_top`.
 *
 * @param {(HTMLElement|jQuery|string)} parent 
 *    The parent as the element or as the selector
 * @param {number} offset_top
 *    The top offset to check
 *
 * @return {jQuery}
 *    All elements that are on the specific location.
 */
function findChildrenWithOffset(parent, offset_top){
  let found = $([]);
  $(parent).children().each(function(){
    let t = $(this);
    let o = t.offset();
    let start = o["top"];
    let end = start + t.outerHeight();
    if(start <= offset_top && offset_top <= end){
      found = found.add(t);
    }
    if(t.children().length > 0){
      t.children().each(function(){
        found = found.add(findChildrenWithOffset(this, offset_top));
      });
    }
  });
  
  return found;
}

let c = findChildrenWithOffset(document, 140);
$(c).css("background", "rgba(0, 0, 255, 0.2)");

.absolute{
  position: absolute;
  height: 20px;
  width: 20px;
  border: 1px solid green;
}

.offset-line{
  position: absolute;
  top: 139px;
  left: 0;
  right: 0;
  background: red!important;
  height: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li>first list</li>
   <li>second list</li>
   <li>third list</li>
</ul>
<h3>Skills:</h3>
<p><span style="text-decoration: underline;">This</span> are my skills. xyz, abc, pqr</p>
<div class="absolute" style="left: 220px; top: 110px;">
  A1
</div>
<div class="absolute" style="left: 240px; top: 120px;">
  A2
</div>
<div class="absolute" style="left: 260px; top: 130px;">
  A3
</div>
<div class="absolute" style="left: 280px; top: 140px;">
  A4
</div>
<div class="absolute" style="left: 300px; top: 150px;">
  A5
</div>
<div class="offset-line"></div>

Sometimes, this code is not searching for all elements in that page, I don't know the reason behind that but it is not match the element. Is there any solution for that? For Example: I want to get `p` element in above example but I'm not able to get that element — Ishan Joshi, Dec 07 '20 at 16:49
Which code? The `document.elementFromPoint()` always returns only the topmost element. The `findChildrenWithOffset()` function should return all elements that are within the specified position. Note that the `$.last()` call removes all element but the topmost element. If you remove this line, you will have **all** elements at that location. I modified my example above to point that out. — miile7, Dec 07 '20 at 16:53
If you don't get the element probably your coordinates are wrong. For both functions the element has to start above and end below the coordinates. — miile7, Dec 07 '20 at 16:58
i'm using `findChildrenWithOffset(parent, offset_top)` function and here i'm not getting all the elements — Ishan Joshi, Dec 07 '20 at 17:02
let me clarify, I have offsetTop() and getBoundingClientRect().x value through which I'm trying to match for certain element on the page, but i'm not getting the required result — Ishan Joshi, Dec 07 '20 at 17:05
Did you remove the `$.last()`? There might be multiple elements overlapping. Can you edit your question and add some minimal example? Otherwise I cannot help :( — miile7, Dec 07 '20 at 17:11
yes i did remove `c.last()`, I tried on this website [link](https://reactjs.org/docs/forms.html) — Ishan Joshi, Dec 07 '20 at 17:12
Please edit your question or even better ask a new question with a [minimal reproducable example](https://stackoverflow.com/help/minimal-reproducible-example) — miile7, Dec 08 '20 at 07:31
I got it, it's done I use `document` afterwards instead of jquery and it worked, thanks for your help — Ishan Joshi, Dec 09 '20 at 09:17

score -1 · Answer 2 · answered Dec 03 '20 at 06:14

As stated in this article, it's not possible to query for an element with a specific style applied. You could query all elements in a page and loop through them, checking their styles, but this would cause a lot of overhead.

It may be feasible, though, if you can narrow down your possible elements based on things like parent elements, type, etc.

How to get element whose offset top we are knowing using javascript

2 Answers2