Question

问题再简单了。 z-index值由style=...或className分配，是否使用Javascript。我认为这不重要。如何找到（使用Javascript）最高的z-index？（它使用的元素很好，但不是必需的。）

您不能使用（新）querySelector，因为它不查询CSS值。有什么方法可以查询CSS吗？（不是样式表，而是实际使用的值。）

GRAZI

Answer 1

这并不像找到具有最高z-index的元素那么简单。堆叠顺序还取决于树关系，因此如果显式设置了具有最多z-index的静态定位元素，并且如果您的代码检索到它，那么它将是无用的，因为z-index对静态定位元素是无用的。

此外，IE的堆叠订单规则已完全破坏，因此您也必须考虑到这一点。并且您可能必须考虑IE 8/9中的iframe / select元素，因为它们具有比任何其他节点更多的堆叠顺序优先级。

这可能很有用：http://www.w3.org/TR/CSS21/zindex.html

您必须遵循所有这些并考虑IE错误，以便获得具有最多堆叠顺序优先级的元素的一致方法。

Answer 2

这是kennebec's / Pravens代码的修改版本，它在堆叠上下文中找到最高的z-index。此版本还考虑了不透明度。

如果您要查找的只是将元素放在页面中的其他内容之上，只需调用highZ（document.body）或只调用highZ（）。它找到根堆叠上下文的最高z索引，它将完全相同。

在堆叠环境中，只有非静态定位的元素才有意义。
未定位的元素不会启动新的堆叠上下文。因此，他们的后代可能存在于当前的堆叠环境中。因此递归。
此外，如果z-index为'auto'，则该元素不会启动新的堆叠上下文，因此您必须递归其元素。

不透明度值小于1的元素会启动新的堆叠上下文。如果未定位不透明度小于1的元素，则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层，如果它是具有'z-index：0'的定位元素，则将使用该层。 '不透明度：1'。如果定位了不透明度小于1的元素，则[z-index]属性应用[CSS21]中所述，但“auto”被视为“0”，因为始终会创建新的堆叠上下文。

function highZ(parent, limit){
    limit = limit || Infinity;
    parent = parent || document.body;
    var who, temp, max= 1, opacity, i= 0;
    var children = parent.childNodes, length = children.length;
    while(i<length){
        who = children[i++];
        if (who.nodeType != 1) continue; // element nodes only
        opacity = deepCss(who,"opacity");
        if (deepCss(who,"position") !== "static") {
            temp = deepCss(who,"z-index");
            if (temp == "auto") { // positioned and z-index is auto, a new stacking context for opacity < 0. Further When zindex is auto ,it shall be treated as zindex = 0 within stacking context.
                (opacity < 1)? temp=0:temp = highZ(who);
            } else {
                temp = parseInt(temp, 10) || 0;
            }
        } else { // non-positioned element, a new stacking context for opacity < 1 and zindex shall be treated as if 0
            (opacity < 1)? temp=0:temp = highZ(who);
        }
        if (temp > max && temp <= limit) max = temp;                
    }
    return max;
}

function deepCss(who, css) {
    var sty, val, dv= document.defaultView || window;
    if (who.nodeType == 1) {
        sty = css.replace(/\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        val = who.style[sty];
        if (!val) {
            if(who.currentStyle) val= who.currentStyle[sty];
            else if (dv.getComputedStyle) {
                val= dv.getComputedStyle(who,"").getPropertyValue(css);
            }
        }
    }
    return val || "";
}

Answer 3

您需要循环遍历DOM中的每个元素，并跟踪循环时找到的最大z-index以及具有该z-index的元素。然后，当你完成后，你将拥有你正在寻找的元素。

这是一个非常密集的脚本，可能会杀死用户的浏览器。你为什么要这样做？

Answer 4

你只需要兄弟元素来找到最高的z-index，所以从父元素或正文开始。

通常你有一些具有非常高的z-index的元素，你希望它始终处于最佳状态 - 如果是这样，忽略超过一百万的z指数或安全地高于兄弟姐妹数的任何东西。

您可以在一个函数中执行此操作，但查找样式表值的语法很方便。

function highZ(pa, limit){
    limit= limit || Infinity;
    pa= pa || document.body;
    var who, tem, mx= 1, A= [], i= 0, L;
    pa= pa.childNodes, L= pa.length;
    while(i<L){
        who= pa[i++]
        if(who.nodeType== 1){
            tem= parseInt(deepCss(who,"z-index")) || 0;
            if(tem> mx && tem<=limit) mx= tem;
        }
    }
    return mx;
}
function deepCss(who, css){
    var sty, val, dv= document.defaultView || window;
    if(who.nodeType== 1){
        sty= css.replace(/\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        val= who.style[sty];
        if(!val){
            if(who.currentStyle) val= who.currentStyle[sty];
            else if(dv.getComputedStyle){
                val= dv.getComputedStyle(who,"").getPropertyValue(css);
            }
        }
    }
    return val || "";
}

警报（高阻（））

Answer 5

meder非常重要！无论如何，我试着编码，因为我在工作中感到无聊，无法自拔：

注意：仅适用于使用style属性设置的样式（不会捕获样式表设置的样式）

function getHighIndex (selector) {
    if (!selector) { selector = "*" };

    var elements = document.querySelectorAll(selector) ||
                   oXmlDom.documentElement.selectNodes(selector),
        i = 0,
        e, s,
        max = elements.length,
        found = [];

    for (; i < max; i += 1) {
        e = elements[i].style.zIndex;
        s = elements[i].style.position;
        if (e && s !== "static") {
          found.push(parseInt(e, 10));
        }
    }

    return found.length ? Math.max.apply(null, found) : 0;
}

如何在文档中获取（带有）最高CSS z-index的元素？

5 个答案: