时间戳

首页 > 解决方案 > 如何找到所有可见元素中最重要的元素？（离用户最近）

javascript - 如何找到所有可见元素中最重要的元素？（离用户最近）

问题描述

如果我们假设桌面是一个真正的桌面，我想找到这张纸，它位于所有其他桌面之上，最靠近用户的鼻子。

我知道我在某处读过，会有一个相对较新的（可能是几年）javascript 命令，让浏览器完成工作，但我再也找不到参考了。

[编辑：我记得在以前的 Firefox 版本的开发人员工具中有一个html 页面的3-D 视图。（据我所知，它已被删除。）该工具必须包含一个算法来确定元素的有效顺序。   刚查了火狐前3-D查看工具的截图，似乎并没有真正寻找最近的元素，只是做了一个简单的叠加。似乎是个死胡同。]

标签： javascripthtmlz-index

解决方案

您可以创建getHighestZindex如下定义的函数：

function getHighestZindex(elem)
{
  const elems = document.getElementsByTagName(elem);
  let top = 0;
  for (let i = 0; i < elems.length; i++)
  {
    const zindex = document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    if ((zindex > top) && (zindex != 'auto'))
    {
      top = zindex;
    }
  }
  return top;
}

您可以调用getHighestZIndex特定的元素类型，例如像这样的“DIV”：

getHighestZIndex('div');

编辑

将有两个用例来检查哪个元素在顶部

  • z-index如果在 css 中没有定义任何元素
  • 如果任何元素或所有元素z-index在 css 中都有特定定义。

所以会has_allauto在函数中添加一个检查...

假设您有html如下代码：

<div id="block-1">
 <div id="inner-block"></div>
</div>
<div id="block-2"></div>

并检查哪个元素在顶视图上，函数如下所示：

function getHighestZindex(elem) {
  const elems = document.getElementsByTagName(elem);
  let id = "";
  let top = 0;
  let has_allauto = true;
  for (let i = 0; i < elems.length; i++) {
    const zindex = document.defaultView
      .getComputedStyle(elems[i], null)
      .getPropertyValue("z-index");

    if (zindex !== "auto") {
      has_allauto = false;
    }

    if (zindex > top && zindex != "auto") {
      top = zindex;
      id = elems[i].id;
    }
  }
  if(has_allauto) {
    id = elems[elems.length-1].id;
  }
  return id;
}

这将返回id视图顶部的元素。

工作示例示例

推荐阅读