javascript - 如何找到具有最大 z-Index 的元素？

Question

我有很多动态创建的元素，只要它得到 z-Index++，所以最新的元素随时都在上面。当其中一个被点击时，他得到他的 z-Index max+1。所以我需要获取元素，即在顶部，我该怎么做？

仅限本机 JS。谢谢

Answer 1

不要试图找到它——你需要迭代所有的 DOM。当您动态创建它们时，只需保存对它的引用并每次更新它。或者只是将当前的z-index最大值存储在一个max变量中。

Answer 2

http://jsfiddle.net/h4ets/

假设您只在 style 属性中应用 z-index

var elems = document.body.getElementsByTagName("*");
var largest;
var check = 0;
for(i=0;i<elems.length;i++){
    if(elems[i].style.zIndex > check){
        check = elems[i].style.zIndex;
        largest = elems[i];
    }
}
// largest is the element
// check is the z-index value of the element with largest z-index

在 chrome 和 safari 等 webkit 浏览器中，获取元素的计算样式似乎是一个问题，因为它返回 auto，这是一个主要问题，因为 chrome 尤其是现在是一种流行且广泛使用的浏览器。所以现在我建议如果你想这样做，在样式属性中应用 z-index，直到错误被修复

Answer 3

这是一个最好的解决方案

$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});