Array reduce ()

下面是另一个使用 Array.reduce()来确定最上面的 z-index的解决方案:

const max_zindex = [...document.querySelectorAll('body *')].reduce((accumulator, current_value) => {
current_value = +getComputedStyle(current_value).zIndex;


if (current_value === current_value) { // Not NaN
return Math.max(accumulator, current_value)
}


return accumulator;
}, 0); // Default Z-Index Rendering Layer 0 (Zero)

在 NodeList 中寻找最大 zIndex 的稳健解决方案

1. 应该同时检查节点本身提供的 getComputedStyle和 style对象
2. 由于 isNaN("") === false的原因，使用 Number.isNaN 代替 isNaN

function convertToNumber(value) {
const asNumber = parseFloat(value);
return Number.isNaN(asNumber) ? 0 : asNumber;
}


function getNodeZIndex(node) {
const computedIndex = convertToNumber(window.getComputedStyle(node).zIndex);
const styleIndex = convertToNumber(node.style.zIndex);


if (computedIndex > styleIndex) {
return computedIndex;
}


return styleIndex;
}


function getMaxZIndex(nodeList) {
const zIndexes = Array.from(nodeList).map(getNodeZIndex);
return Math.max(...zIndexes);
}


const maxZIndex = getMaxZIndex(document.querySelectorAll("body *"));

ShadowRoot 解决方案

我们不能忘记自定义元素和影子根内容。

function computeMaxZIndex() {
function getMaxZIndex(parent, current_z = 0) {
const z = parent.style.zIndex != "" ? parseInt(parent.style.zIndex, 10) : 0;
if (z > current_z)
current_z = z;
const children = parent.shadowRoot ? parent.shadowRoot.children : parent.children;
for (let i = 0; i < children.length; i++) {
const child = children[i];
current_z = getMaxZIndex(child, current_z);
}
return current_z;
}
return getMaxZIndex(document.body) + 1;
}

上面的“ ES6”版本比第一个解决方案效率低，因为它在整个数组中进行多次冗余传递。相反，你可以试试:

findHighestZ = () =>
[...document.querySelectorAll('body *')]
.map(elt => parseFloat(getComputedStyle(elt).zIndex))
.reduce((highest, z) => z > highest ? z : highest, 1)

理论上，在一个 reduce 步骤中执行这个操作会更快，但是一些快速的基准测试没有显示出明显的差异，而且代码更加复杂

使用 map和 filter的非常简单的代码

function calMaxZIndex() {
return Array.from(document.querySelectorAll('body *'))
.map(a => parseFloat(window.getComputedStyle(a).zIndex || a.style.zIndex))
.filter(a => !isNaN(a))
.sort()
.pop()
}


function getMax() {
const max = calMaxZIndex() ?? 0
console.log({
max
})
}


getMax()

#ticket-box {
text-align: center;
position: fixed;
top: 0;
right: 0;
width: 100%;
background-color: #e9d295;
padding: 5px;
z-index: 6;
}

<div id="menu">
<a href="javascript:void(0);" onclick="closeMenu();" style="color: #ffffff; position: absolute; top: 15px; right: 15px;text-decoration: none;">CLOSE</a>


<ul style="text-align:center;list-style-type:none;">
<li><a href="#">FILM</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">SPORTS</a></li>
<li><a href="#">FINANCE</a></li>
</ul>
</div>


<div id="ticket-box">Have you bought your tickets for friday's event? No?! <a href="#">Grab yours now!</a></div>


<center><a href="javascript:void(0);" onclick="revealMenu();" style="display: inline-block; color: #333333; margin-top: 90px;">MENU</a></center>

基于以前的答案:

经过一些修改后仍能正常工作

let zIndexMax = () =>
[...document.querySelectorAll('body > *')]
.map(elem => parseInt(getComputedStyle(elem).zIndex, 10) || 0)
.reduce((prev, curr) => curr > prev ? curr : prev, 1);

原型机

HTMLElement.prototype.zIndexMax = function () {
return [...this.children]
.map(elem => parseInt(getComputedStyle(elem).zIndex, 10) || 0)
.reduce((prev, curr) => curr > prev ? curr : prev, 1);
}

用途

document.querySelector('body').zIndexMax();

在浏览了 StackOverflow 上的许多解决方案之后，我发现没有一个能够正确工作，并且要考虑 zIndex 实际上是如何工作的。我已经编写了一个解决方案，它也考虑到了堆叠上下文。您可以参考 这篇文章来理解在 CSS 中堆叠上下文是如何工作的。

const getZIndex = el => {
const computedStyle = getComputedStyle(el, null)
const zIndex = computedStyle.getPropertyValue('z-index')
return zIndex !== 'auto' ? parseInt(zIndex) : null
}


const getZIndexWithinStackingContext = (el, context) => {
let zIndex = getZIndex(el)
if (!zIndex) return null


let result = zIndex


while (el.parentElement !== context) {
el = el.parentElement
zIndex = getZIndex(el)
if (zIndex) {
result = zIndex
}
}


return result
}


const createZIndex = (overVisibleOnly = false, context = document.body) => {
const elements = [...document.querySelectorAll('body *')]
let highestZIndex = 0


elements.forEach(el => {
if (overVisibleOnly) {
const isVisible = !!el.offsetParent
if (!isVisible) return
}


const zIndex = getZIndexWithinStackingContext(el, context)


if (zIndex && zIndex > highestZIndex) {
highestZIndex = zIndex
}
})


return highestZIndex + 1
}

请注意，此解决方案考虑所有元素，而不仅仅是定位元素，因为它们可以在添加某个类之后定位。但是您可以通过添加位置计算样式属性的检查来轻松地解决这个问题。

我发现，当页面上有动态更改的 z-index 时，所提供的方法不起作用(当前方法只获取原始设置的 z-index)。

该函数还可以使用动态添加的 z 索引:

function find_max_z_index() {
const all_z = [];
document.querySelectorAll("*").forEach(function(elem) {
all_z.push(elem.style.zIndex)
})
const max_index = Math.max.apply(null, all_z.map((x) => Number(x)));
return(max_index)
}

下面是我的两行函数:

const getMaxZIndex = function () {
const elements = [...document.querySelectorAll("body *")];
return Math.max(...elements.map(x => parseInt(getComputedStyle(x, null).zIndex) || 0));
};
console.log(getMaxZIndex());

很短

[...document.querySelectorAll`*`]
.reduce((a,e,i,t,z=+window.getComputedStyle(e).zIndex||0) => z>a ? z:a ,0);

let z = [...document.querySelectorAll`*`].reduce((a,e,i,t,z=+window.getComputedStyle(e).zIndex||0) => z>a ? z:a ,0);


console.log(z);

<div style="z-index: 100"></div>
<div style="z-index: 3000"></div>
<div style="z-index: 200"></div>