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"的形式回归。 This ancient article解释了“bug”是如何导致此行为的。我试图制作每个节点的克隆，将位置设置为相对，然后获取z-index，

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

但这也不起作用。这有什么不对？除了重新创建页面上的所有内容之外，还有更便宜的方法吗？

JSBIN

Answer 1

节点的克隆似乎没有获得z-index，而节点本身返回正确的值。您可以尝试使用它（不确定它在具有大量内容的页面上的反应）：

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 Fiddle Demo

暂时更改元素的位置可能会产生故障。您需要在包含大量position:absolute;或position:fixed;的内容和元素的网页上对其进行测试。

Answer 2

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

你可以循环遍历所有标签，如果值是＆＃34; auto＆＃34;假设它是999.如果它＆gt; = 1000，那就把它作为你的最高＆＃34;值。然后，从那个方向的最高数字增加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是过度杀戮......有点像＆＃34;以防万一＆＃34;我错过了什么，因为任何z-index：auto等于零。请参阅以下＆＃34;证明＆＃34;即使我的z-index只是＆＃34; 1＆＃34;它重叠了＃3;自动＆＃34;

的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>

获取页面上每个元素的Z-index

2 个答案:

JS Fiddle Demo