Getting the z-index of a DIV in JavaScript?

Question

I have a div normaldiv1 with class normaldiv. I am trying to access its z-index through the style property but it always returns 0 although it's set to 2 in the stylesheet.

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

How can I find the z-index of an element using JavaScript?

Tremml

I would really recommend using a library like jQuery or Prototype to help – Ingvar

Answer 1

Since z index is mentioned in the CSS part you won't be able to get it directly through the code that you have mentioned. You can use the following example.

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

pass your element id and style attribute to get to the function.

Eg:

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

For firefox you have to pass z-index instead of zIndex

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

Reference

Vaquero

+1 but "style" is misleading. You can read directly it if it's inline declared, you can't if it's CSS declared. It's the CSS part which matters. – Maggiemaggio

Better not to use non-standard currentStyle before standard getComputedStyle. – Violoncellist

IE8: says document.defaultView doesn't exists and neither [element].currentStyle (Object doesn't support this property or method) – Novelistic

Thank you! This is so useful for debugging. – Flatcar

In case anyone is interested jQuery equivalent: $.fn.cssComputed = function (prop) { var elm = this.get(0); var style = ""; if (window.getComputedStyle) { style = document.defaultView.getComputedStyle(elm, null).getPropertyValue(prop); } else if (elm.currentStyle) { style = elm.currentStyle[prop]; } return style; } – Caster

Answer 2

try this

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

usage

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

(if parent gets to root it will return 0)

Hebbe

this works great! window.document.defaultView.getComputedStyle(e).getPropertyValue('z-index'); – Malynda

It's not; window.document.defaultView is the same as window; and you can drop window. in all of these cases as well. – Anywheres

doesn't work for me, it gets the z-index of element in the element's stacking context, but I want z-index in the document's stacking context, see this for probably correct implementation: #5930724 – Damiondamita

Citing MDN: In many code samples, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It's likely the defaultView pattern was a combination of folks not wanting to write a testing spec for window and making an API that was also usable in Java. – Homozygous

Answer 3

This can help:

const myElement = document.getElementById('elementID');
const elementZIndex = myElement.style.Zindex;

Gramercy