如何使用javascript获取我们知道的偏移量顶部的元素答案

【问题标题】：How to get element whose offset top we are knowing using javascript如何使用javascript获取我们知道的偏移量顶部的元素
【发布时间】：2021-03-15 03:47:29
【问题描述】：

假设我们知道特定元素的偏移顶部，并且我们想要获取位于该点的元素，那么有什么方法可以得到它吗？

例如，我们有 offset top = 6000 的 DOM 元素，我们想找到位于该偏移顶部的元素。

例子：

  <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>

现在，假设<p> element 的 offsetTop 是 10，我们希望整个元素的含义类似于 <p>This are my skills. xyz, abc, pqr</p>，只需通过使用它的 offsetTop。

【问题讨论】：

标签： javascript jquery dom dom-events

【解决方案1】：

对我来说，这个问题似乎是在寻找特定点的元素。如果是这样，您可以使用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>

如果您只想通过顶部偏移量，例如因为您不想指定 x 坐标，所以您必须遍历您的元素。

红线显示要检查的顶部偏移量。添加并返回在此行之前和之后结束的所有元素。它们以蓝色背景显示。

/**
 * 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>

【讨论】：

有时，这段代码不会搜索该页面中的所有元素，我不知道背后的原因，但它与元素不匹配。有什么解决办法吗？例如：我想在上面的示例中获取 p 元素，但我无法获取该元素
哪个代码？ document.elementFromPoint() 总是只返回最顶层的元素。 findChildrenWithOffset() 函数应返回指定位置内的所有元素。请注意，$.last() 调用会删除除最顶层元素之外的所有元素。如果删除此行，您将在该位置拥有 all 元素。我修改了上面的示例以指出这一点。
如果你没有得到元素可能你的坐标是错误的。对于这两个函数，元素必须从坐标上方开始并在坐标下方结束。
我正在使用 findChildrenWithOffset(parent, offset_top) 函数，但这里我没有得到所有元素
我搞定了，我用document代替jquery，它成功了，谢谢你的帮助

【解决方案2】：

正如this article 中所述，无法查询应用了特定样式的元素。您可以查询页面中的所有元素并循环遍历它们，检查它们的样式，但这会导致大量开销。

不过，如果您可以根据父元素、类型等因素缩小可能的元素范围，这可能是可行的。

【讨论】：