javascript - 如何使用javascript获取我们知道的偏移量顶部的元素
问题描述
假设我们知道特定元素的偏移顶部,并且我们想要获取位于该点的元素,那么有什么方法可以得到它吗?
例如,我们的 DOM 元素的偏移量 top = 6000,我们想要找到位于该偏移量顶部的元素。
例子:
<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>
现在在这里,假设元素的offsetTop为10,并且我们希望整个元素的含义类似于,只需使用它的 offsetTop。<p>
<p>This are my skills. xyz, abc, pqr</p>
解决方案
对我来说,这个问题似乎是在寻找特定点的元素。如果是这样,您可以使用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>
推荐阅读
- javascript - 如何在不覆盖任何键的情况下用另一个数组的值更新一个数组?
- javascript - 当下拉列表的值更改时,如何从 php 获取标签信息以更改?
- javascript - 为什么在这个高阶函数示例中我收到未定义?
- python - random_state 在 sklearn 的 DecisionTreeRegressor 中究竟做了什么?
- c - 逆sin函数只返回0
- html - 我的页脚不会停留在固定位置,内容和页脚之间有空间
- visual-studio-code - 在 vscode 扩展中订阅命令的目的?
- wpf - WPF 绑定到类并显示验证错误
- python - 有没有办法使用像列表一样的midi文件,其中每个元素都是一个音符 - 并单独播放它们?
- c++ - 找不到浮点异常