Obteniendo el índice Z de un DIV en JavaScript?

Question

Tengo un div normaldiv1 con clase normaldiv. Estoy intentando acceder a su índice z a través de la propiedad de estilo, pero siempre devuelve 0 aunque está establecido en 2 en la hoja de estilos.

CSS:

.normaldiv 
{ 
    width:120px; 
    height:50px; 
    background-color:Green; 
    position: absolute; 
    left: 25px; 
    top:20px; 
    display:block; 
    z-index:2; 
} 

`

HTML:

<div id="normaldiv1" 
    class="normaldiv" 
    newtag="new" 
    tagtype="normaldiv1" 
    onmousedown="DivMouseDown(this.id);" 
    ondblclick="EditCollabobaTag(this.id,1);" 
    onclick="GetCollabobaTagMenu(this.id);" 
    onblur="RemoveCollabobaTagMenu(this.id);"> 

JavaScript:

alert(document.getElementById('normaldiv1').style.zIndex); 

¿Cómo puedo encontrar el índice z de un elemento utilizando JavaScript?

Answer 1

Dado que el índice z se menciona en la parte CSS, no podrá obtenerlo directamente a través del código que ha mencionado. Puedes usar el siguiente ejemplo.

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

pase su ID de elemento y el atributo de estilo para acceder a la función.

Ej:

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

para Firefox que tiene que pasar índice z en lugar de zIndex

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

Reference

Answer 2

probar este

window.getZIndex = function (e) {  
    var z = window.document.defaultView.getComputedStyle(e).getPropertyValue('z-index'); 
    if (isNaN(z)) return window.getZIndex(e.parentNode); 
    return z; 
}; 

uso

var myZIndex = window.getZIndex($('#myelementid')[0]); 

(si el padre llega a la raíz devolverá 0)