javascript - Javascript html在特定元素下方或上方（相交）视觉上查找所有元素

Question

有没有办法找到特定元素上方/下方或相交的所有其他 html 元素？

我想确保该元素显示在所有其他元素之上，因此我想找到所有相交元素并将元素设置为z-index比所有其他元素都大的值z-index。

标签： javascripthtmlz-index

Answer 1

这是一种解决方案，假设元素已z-index设置其style属性而不是 css 中的计算机：（代码在打字稿中）

export function getMaxZIndexOfOverlappingElements(target: HTMLElement): number {
    const zIndexElements = Array.from(document.querySelectorAll("*[style*=z-index]"))
    let zIndex = 0
    zIndexElements.forEach(el => {
        if (el instanceof HTMLElement && overlap(target, el)) {
            try {
                zIndex = Math.max(zIndex, parseInt(firstNotEmpty(el.style.zIndex, "0")))
            } catch (e) {
                // skip invalid zIndex value
            }
        }
    })
    return zIndex
}