默认的z-Index是多少?元素，以及如何使用JavaScript获得它

What is default z-Index of <div> element in HTML, and how to get it using JavaScript?

本文关键字：何使用 JavaScript z-Index 多少 元素 默认      更新时间：2023-09-26

通常我们可以使用以下命令获取div元素的z-Index值，例如:

var zindex = document.getElementById('id').style.zIndex;

我在我的代码中使用这个值来做一些事情。现在的问题是，在HTML代码中没有定义任何默认值的情况下(甚至在外部css中定义z-Index的情况下)，相同的java脚本命令什么也不返回。

我知道在默认情况下，浏览器通常根据元素栈来决定渲染。但是在JavaScript中是否有任何特定的值或方法来实现没有定义的值?

我的意思是，通常没有返回值意味着没有定义值。但它也发生与外部css，所以我怎么能区分两者??

默认 z-index为'auto'，除了默认z-index:0。'Auto'表示元素从它的父元素获取z-index。

您可以通过使用开发人员工具(在Chrome中)或其他浏览器中的任何类似工具看到这一点。你也可以通过window.getComputedStyle()在你的代码中得到这个

您可以在元素上尝试window.getComputedStyle():

https://developer.mozilla.org/en/DOM/window.getComputedStyle 

var e = document.getElementById('mydiv');
var value = window.getComputedStyle(e[0], null)['zIndex']

我得到了这些值:"auto"， "10"。修改后:z-index: 10, position: relative

我相信所有东西都是z索引为0的。z-index只有在你为所有你关心的元素设置它时才有效。你可以将一个div的z-index设置为100000，但如果你不设置你想要重叠的其他元素的z-index，那就没有关系了。

我想我想说的是div的默认z-index并不重要，只有当你设置它时才会计算它

div中的div没有特定的z-index。在iframe内，在3个div和1个table内，没有z-index(或计算出的z-index)

我看不出有任何实际的理由试图找到一个项目的z-index，如果它是不相关的。

@Konstantin-Smolyanin

Auto'表示元素从它的父元素获取z-index。

不，它不是——"inherit"意味着元素从它的父元素那里获得它的z-index。

当未指定z-index属性时，元素将在默认渲染层0(零)上呈现。

看看这个问题:在JavaScript中获得div的z-index ?:

由于在CSS部分中提到了z索引，因此您将无法直接通过您提到的代码获得它。您可以使用以下示例:

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (window.getComputedStyle)
    {
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    }  
    else if (x.currentStyle)
    {
        var y = x.currentStyle[styleProp];
    }                     
    return y;
}

传递你的元素id和style属性来获取函数。

, 

var zInd = getStyle ( "normaldiv1" , "zIndex" );
alert ( zInd );

对于firefox，你必须传递z-index而不是zIndex

var zInd = getStyle ( "normaldiv1" , "z-index" );
 alert ( zInd );
参考

Chrome必须使用z-index

你误解了元素"style"属性的含义。通过引用元素。样式你实际检索的是元素的内联样式。例如:

var el = document.getElementById('myEl');
console.log(el.style.zIndex); //you are asking for <div id="myEl" style="z-index: 1;"></div>

和得到你的css样式的值(它可能是一个code goes here标签或任何外部样式表)，你必须检查是否支持标准方法(window.getComputedStyle)，如果不是，你应该检查internet explorer的特定版本。你可以通过引用el.currentStyle.

概要:

to get inline style: var zIndex = el.style.zIndex
to get stylesheet value or style tag value:
    standard method: var zIndex = window.getComputedStyle(el,null).getPropertyValue('z-index');
    ie method: var zIndex = el.currentStyle['z-index'];

相关文章：