13

我想从代码中确定 html 页面上元素的 z-index。我正在使用 jQuery。

jQuery 将允许我使用 $(element).css("z-index") 检查应用的 z-index。如果 z-index 没有直接设置在该元素上，Firefox 返回“auto”，IE 返回“0”。该节点的有效 z-index 取决于其容器的 z-index。

我想我可以通过查看节点及其父节点来计算有效的 z-index，直到找到 z-index 值。问题是，至少在 IE 上，我无法区分 z-index 为 0 的元素与将继承其父级 z-index 的元素，因为在这两种情况下 .css("z-index") 返回 0 . 关于如何计算元素的实际 z-index 有什么想法吗？

如果您想进行实验，可以使用此代码。在 IE 上，它将输出“0”、“0”、“0”、“300”。在 Firefox 上，它将输出“auto”、“auto”、“0”、“300”。

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<script type="text/javascript">
    alert($("<div></div>").css("z-index"));
    alert($("<div style='position:relative'></div>").css("z-index"));
    alert($("<div style='z-index:0'></div>").css("z-index"));
    alert($("<div style='z-index:100'></div>").css("z-index"));
</script>

</body>
</html>
4

5 回答 5

10

在 IE 上，我无法区分 z-index 为 0 的元素与将继承其父级 z-index 的元素

您正在寻找具有有效z-index 的元素。z-index 仅对position样式不是static. 因此，您应该查找父母，直到找到具有非的定位元素。z-indexauto

（这将为您提供最内层的 z-index。堆叠上下文可以嵌套，因此您可能希望通过查看要定位的最远祖先来查看最外层的 z-index。）

在 IE6-7 上，没有错误的元素会z-index自动接收z-index. 因此，当您在 IE6-7 中查看没有 a 的定位元素时，0这确实会给您一个读数……这可能是错误的，但它反映了 IE 已经错误的渲染，无论如何您都必须避免或解决这个问题。0z-index

（在 IE8 中，这最终得到修复，您确实会收到auto第一个警报，假设有合适的 doctype/EmulateIE 设置将其发送到 IE8 本机模式。）

于 2010-01-07T22:44:55.730 回答
1

我看到了问题，但我不确定它是否真的很重要......因为零是页面的根 z-index 为 0。在以下代码中：

alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").get(0).style.zIndex);
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").children('#blah').get(0).style.zIndex);

FF 报告 10 和（不是“自动”）。IE 报告 10 和 0。对于 IE，如果您看到 0，则向上移动一个级别。对于FF，如果你看到一个空白，然后向上移动一个级别。然后在任何一种情况下，如果你到达根，并且值是'auto'（在FF的条件下）那么我（猜想）你可以假设它是0。（也许这不是一个很好的假设！）

于 2010-01-07T22:46:04.363 回答
1

我认为这个功能在大多数情况下会解决你的问题

function ustMaxZIndex(eleman) {
  var elm = $('#'+eleman);
  var zindex = parseInt(elm.css("z-index")) > 0 ? elm.css("z-index") : 0;
  while(true) {
    zindex = (parseInt(elm.css("z-index")) > 0 && parseInt(elm.css("z-index")) > zindex) ? elm.css("z-index") : zindex;
    if(elm.length > 0) {
      elm = elm.parent();
    } else {
      break;
    }
  }
  return zindex;
}
于 2014-09-15T13:39:43.743 回答
0

MC_delta_T 答案的优化版本：

这不适用于嵌套的 z-index，但它会在层次结构中找到最高值，这应该在大多数情况下都有效：

function getEffectiveZIndex(elm) {
    var elementZIndex,
        style,
        zindex = 0;

    while(elm) {
        style = getComputedStyle(elm);

        if (style) {
            elementZIndex = parseInt(style.getPropertyValue('z-index'), 10);

            if (elementZIndex > zindex) {
                zindex = elementZIndex;
            }
        }

        elm = elm.parentNode;
    }

    return zindex;
}
于 2014-12-09T09:39:03.050 回答
0

这是我的尝试。auto如果找不到特定的 z-index 数字，则该函数返回，否则返回一个数字。它包括被传递的元素（通过addBack方法调用）。

希望这对某人有帮助：


/**
 * __getElementZIndex
 * 
 * @access  private
 * @param   HTMLElement element
 * @return  String
 */
var __getElementZIndex = function(element) {
    var response = 'auto',
        zIndex,
        items = $(element).parents().addBack().toArray(),
        index,
        item;
    for (index in items) {
        item = items[index];
        zIndex = $(item).css('z-index');
        if (zIndex === 'auto') {
            continue;
        }
        if (zIndex === 'initial') {
            continue;
        }
        if (zIndex === 'inherit') {
            continue;
        }
        if (isNaN(zIndex) === true) {
            continue;
        }
        zIndex = parseInt(zIndex, 10);
        if (response === 'auto') {
            response = zIndex;
            continue;
        }
        if (zIndex > response) {
            response = zIndex;
            continue;
        }
    }
    return response;
};

注意：需要使用 jQuery

于 2019-02-25T01:50:29.963 回答