如何使用jQuery获得内联z-index样式？

Question

以下返回'auto'而不是10.为什么？

<div class="testclass" style="z-index:10"></div>

<script type="text/javascript">
$(function() {
  alert($(".testclass").css("z-index"));
});
</script>

http://jsfiddle.net/kEVq7/50/

Answer 1

显然，因为div没有定位。将此更改改为div的风格：

<div class="testclass" style="position:absolute; z-index:10"></div>

你将在警报中出现。

这是有道理的，因为z-index属性不适用于非定位元素。

顺便说一句，这似乎是依赖于浏览器的行为。您的小提琴在Firefox下报告10，但在Chrome下自动报告。

Answer 2

z-index只能分配给定位元素。尝试添加：

.testclass {
    position:relative;
}

Answer 3

z-index属性只能应用于位置为absolute，relative或fixed的元素。由于默认属性为static，因此您获得的结果为auto而不是10

Answer 4

它一定是Chrome中的一个错误，它适用于FireFox。

试试香草的方法

$(function() {
  console.log($(".testclass").css("z-index"));
  console.log($(".testclass")[0].style.zIndex);
});

http://jsfiddle.net/kEVq7/57/

在这里使用jQuery很少，使得style属性可以跨浏览器工作。

Answer 5

姆。如果你想要一个n答案我认为它是一个错误，但z-index正确设置

.testclass {
    width: 50px;
    height: 50px;
    background-color: black;
}

请参阅demo

Answer 6

这很麻烦，但你可以尝试这个jsFiddle解决方案。它使用.attr()和.substring来查找值。我不太清楚为什么你不能得到内联值。

http://jsfiddle.net/kEVq7/59/

Answer 7

http://jsfiddle.net/kEVq7/63/

这里正在使用vanilla javascript

var x = document.querySelector('.testclass').style.zIndex;
alert(x)

Answer 8

CSS z-index属性始终使用绝对以及相对定位值。因此，您必须定义position:relative或position:absolute。

检查此 demo jsFiddle

HTML

<div class="testclass" style="position:relative; z-index:10;"></div>

的jQuery

$(function() {
  alert($(".testclass").css("z-index"));
});

---

但在您的情况下，您可以使用JavaScript来快速执行j-Query比较，方法是使用 querySelector()

检查此 demo jsFiddle

HTML

<div class="testclass" style="position:relative; z-index:10;"></div>

的JavaScript

alert(document.querySelector('.testclass').style.zIndex);

希望这两个对你有帮助！