获取页面上每个元素的Z索引

Question

我正在尝试在页面上找到最高的z-index。 我正在用这个

var getStyleProp = function(el, prop){
            return window.getComputedStyle(el, null).getPropertyValue(prop);
}
var getHighestZIndex = function(){

            var highestZIndex = 0,
                HTMLElems = ["a","abbr","acronym","address","applet","area","article","audio","b","base","basefont","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","embed","fieldset","figcaption","figure","footer","form","frame","frameset","h1, h2, h3, h4, h5, h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","main","map","mark","menu","menuitem","meta","meter","nav","noembed","noscript","object","ol","optgroup","option","output","p","param","plaintext","pre","progress","q","rp","rt","rtc","ruby","s","samp","script","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr","xmp"],
                tags,
                zIndex;

            for (var i = 0; i < HTMLElems.length; i++){

                tags = document.getElementsByTagName(HTMLElems[i]);

                if (tags){
                    for (var c = 0; c < tags.length; c++){
                        zIndex =getStyleProp(tags[c], "z-index");
                           console.log(tags[c], "zIndex=", zIndex);
                        if (zIndex > highestZIndex){
                            highestZIndex = zIndex;
                        }

                    }   
                }


            }

            return highestZIndex;

        }
console.log(getHighestZIndex());

但是一切都回到了"auto" 。 这篇古老的文章解释了“错误”是如何导致此行为的。 我尝试制作每个节点的克隆，将位置设置为相对，然后获取z-index，

cl.style.display = "none";
cl.style.position = "absolute";
zIndex = (getStyleProp(cl, "z-index"));

但这也不起作用。 怎么了 有比重新创建页面上的所有内容便宜的方法吗？

吉宾

Answer 1

节点的克隆似乎没有获得z索引，而节点本身返回了正确的值。 您可以尝试使用它（不知道它在包含大量内容的页面上可能有什么反应）：

var getHighestZIndex = function () {
    var highestZIndex = 0,
        zIndex,
        pos,
        tags = document.body.getElementsByTagName('*');

    for (var c = 0; c < tags.length; c++) {
        // Get the original 'position' property
        pos = getComputedStyle(tags[c]).position;
        // Set it temporarily to 'relative'
        tags[c].style.position = "relative";
        // Grab the z-index
        zIndex = getComputedStyle(tags[c]).zIndex;
        // Reset the 'position'
        tags[c].style.position = pos;

        console.log(tags[c], "zIndex=", zIndex);

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

    return highestZIndex;
};

console.log(getHighestZIndex());

JS小提琴演示

临时更改元素的位置可能会产生故障。 您需要在页面上包含很多position:absolute;和内容的元素上进行测试position:absolute; 或position:fixed; 。

Answer 2

如果这不适合您的用例，请告诉我，我将其删除。 但是，作为一种思想。

您能否遍历所有标记，并且如果值是“ auto”，则假定它是999。如果值> = 1000，则将其作为“最高”值。 然后，以这种方式将zIndex从最高编号增加到最高。 这样，您放置的第一个标签将是1000，下一个将是1001。

var elements  = document.getElementsByTagName("*"),
    maxZIndex = 999;

for( var i=0; i < elements.length; i++ ) {
    var zIndex = parseInt(elements[0].style.zIndex) || 999;
    maxZIndex  = zIndex > maxZIndex ? zIndex : maxZIndex;
}
return maxZIndex;

这将适合一个用例，您只需要确保要放置的标签大于页面上的任何内容（例如放置模式）即可。

999是过大的...有点“以防万一”，我错过了一些东西，因为z-index：auto的值等于零。 请参阅以下“证明”，即使我的z-index仅为“ 1”，它也会与“ auto”的3层深度的框重叠。

<div style='position:absolute;background-color:white;z-index:1;width:94px;height:94px;'>

</div>
<div style='position:absolute;background-color:red;width:100px;height:100px;'>
    <div style='position:absolute;background-color:blue;width:98px;height:98px;'>
        <div style='position:absolute;background-color:green;width:96px;height:96px;'>

        </div>
    </div>
</div>