Javascript html可视地查找特定元素下方或上方(与之交叉)的所有元素

时间:2020-04-22 15:25:25

标签: javascript html z-index

是否可以找到特定元素位于上方/下方或与之相交的所有其他html元素?

我想确保该元素显示在所有其他元素之上,因此我想找到所有相交的元素,并将该元素的z-index设置为比所有其他元素的{{1}更多的值} s。

1 个答案:

答案 0 :(得分:0)

这里是一种解决方案,假设元素的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
}