寻找（获取）当前页面中最大的 z-index 值的方法(js组件层级计数器)

本文链接：https://blog.youkuaiyun.com/spark333/article/details/99623976

本文介绍了一种通过遍历DOM元素并利用window.getComputedStyle方法获取每个元素的z-index属性值，进而找出页面上最大z-index值的方法。文章提供了具体实现步骤及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：我们可以把 DOM 中的所有元素集合起来，然后转化成一个数组，然后我们遍历这个数组，把所有元素的 z-index 值提取出来，然后就形成了一个纯数字的数组，最后从中取到最大值，就是当前页面中的最大的 z-index 值了。

将我们的思路，转化为代码

1.找到所有元素，转化成数组 (下面方法都可以)
Array.from(document.querySelectorAll('body *'));
Array.from(document.body.querySelectorAll('*'));
[...document.body.querySelectorAll('*')];
[...document.all]

2.使用window.getComputedStyle()方法获取元素的z-index属性

window.getComputedStyle(document.body).zIndex || 0;

这样，我们就可以拿到元素的 z-index 值了。但是问题是，我们拿到的不一定是一个数字，而可能是 auto 这样的字符串值，我们就需要处理一下了。
正常写法 Number(window.getComputedStyle(document.body).zIndex)
简写写法 +window.getComputedStyle(document.body).zIndex

3.数组中寻找最大值(下面方法都可以)
Math.max.apply(null, arr);
Math.max(...arr);
arr.reduce(a,b) => {return a > b ? a : b}
当然，还可以用其他方法

4.最后，组装方法

【document.all已废弃 HTML5
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。】
function getZindex(){
var arr = [...document.all].map(e => +window.getComputedStyle(e).zIndex || 0) ;
return arr.length ? Math.max(...arr) : 1
}

function getZindexTwo(){
return [...document.all].reduce( (r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0) || 1
}