Question

我想从代码中确定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的元素中消除z索引为0的元素，就像在两种情况下一样.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>

Answer 1

在IE上，我不能从一个将继承其父级的z-index的元素中消除z-index为0的元素的歧义

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

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

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

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

Answer 2

我看到了问题，但我不确定它真的很重要...因为零是页面的根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.（也许这不是一个很好的假设！）

Answer 3

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

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;
}

Answer 4

MC_delta_T的优化版本答案：

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

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;
}

Answer 5

这是我的尝试。如果找不到特定的Z索引编号，则该函数将返回$(document).ready(function() { $('#dofg_itemcode').keyup(function(){ $.post("save-mobile.php?dofgid=<?php echo $dofgid; ?>", { vall : $(this).val(); }, function(data) { $(".result").html(data); }); }); });，否则返回一个数字。它包括正在传递的元素（通过auto方法调用）。

希望这对某人有帮助

addBack

注意：需要使用jQuery

如何计算HTML元素的有效z-index

5 个答案: