javascript - 检查哪个元素高于其他元素
问题描述
说我有两个重叠的盒子(小提琴)
<html>
<body>
<div class="box">element 1</div>
<div class="box" style="left: 20px; top: 10px; background-color: red;">element 2</div>
<style>
.box {
background-color: green;
position: absolute;
width: 100px;
height: 100px;
border: 1px sold red;
}
</style>
</body>
</html>
有没有办法告诉香草javascript中哪个框在另一个之上?我只关心用户在上面的视觉感知。
像下面的东西
isAbove(el1, el2) // false
isAbove(el2, el1) // true
解决方案
关于我能想到的唯一方法是获取所涉及元素的dom路径并通过声明检查哪个先出现;这应该让您在没有 z-index 的情况下知道哪个元素自然会显示在另一个元素的“顶部”。
function getAncestors(ele) {
var ancestors = [ele];
while(ele.parentElement) { // walk all parents and get ancestor list
ele = ele.parentElement;
ancestors.push(ele);
}
return ancestors.reverse(); // flip list so it starts with root
}
function declaredBefore(ele1,ele2) {
var a1 = getAncestors(ele1);
var a2 = getAncestors(ele2);
for(var i=0;i<a1.length;i++) { // check path, starting from root
if(a1[i] !== a2[i]) { // at first divergent path
var testNodes = a1[i-1].childNodes; // get children of common ancestor
for(var j=0;j<testNodes.length;j++) { // check them for first disparate ancestor
if(testNodes[j] === a1[i]) { return true; } // ele1 is first
if(testNodes[j] === a2[i]) { return false; } // ele2 is first
}
}
}
return undefined; // could not determine who was first
}
function isAbove(ele1, ele2) {
// rudimentary z-index check for eles sharing a parent
if(ele1.parentNode === ele2.parentNode) {
var z1 = ele1.style.zIndex;
var z2 = ele2.style.zIndex;
if(z1 !== undefined && z2 !== undefined) { // if both have z-index, test that
return z1 > z2;
}
}
return declaredBefore(ele2, ele1); // if 2 is declared before 1, 1 is on top
}
这个解决方案远非防弹,但它至少应该让你知道哪个元素是最后声明的,考虑到 dom 树层次结构。除非元素共享父元素,否则它也不比较 zIndex,尽管您也可以修改它以检查父元素的 zIndex 层次结构。
推荐阅读
- c++ - 指针值失去作用域
- django - Django 模型比较 2 模型和过滤器
- c# - Cosmos 上的 C# 关闭功能?
- reactjs - React - 如果条件超出 html 标记属性
- arrays - 在 Google Bigquery 中访问 ARRAY STRUCT 中的值
- bash - 使用“询问对话框”命令立即通过 Bash 命令传递文本
- css - 单击其他控件时JavaFX CheckBox会更改大小
- angular - DOMException: 阻止具有源“http://localhost:9000”的框架访问跨域框架
- azure - 授权失败
- python - Python从给定索引开始在两个方向上迭代列表