18

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?

Robert Cartaino
  • 26,476
  • 6
  • 44
  • 67

2 Answers2

20

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

rahul
  • 179,909
  • 49
  • 229
  • 260
  • +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. – annakata Sep 07 '09 at 08:09
  • 1
    Better not to use non-standard `currentStyle` before standard `getComputedStyle`. – kangax Sep 09 '09 at 05:27
  • IE8: says `document.defaultView` doesn't exists and neither `[element].currentStyle` (Object doesn't support this property or method) – gcb Aug 09 '12 at 18:13
  • Thank you! This is so useful for debugging. – Lucas Wiman Aug 15 '12 at 02:11
  • 1
    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; } ` – vbguyny May 13 '16 at 14:10
8

try this

window.getZIndex = function (e) {      
  var z = window.document.defaultView.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)

kernowcode
  • 5,254
  • 1
  • 32
  • 35
  • this works great! ```window.document.defaultView.getComputedStyle(e).getPropertyValue('z-index');``` – pbojinov Nov 13 '14 at 20:04
  • It's not; `window.document.defaultView` is the same as `window`; and you can drop `window.` in all of these cases as well. – 1j01 May 26 '17 at 20:03
  • 1
    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: https://stackoverflow.com/questions/5930224/determine-absolute-or-global-z-index – aeroson Aug 18 '17 at 13:06