思路: 我们可以把 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
}