20

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
  • 27,494
  • 6
  • 45
  • 67

2 Answers2

24

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
  • 184,426
  • 49
  • 232
  • 263
  • +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
10

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)

Jay Byford-Rew
  • 5,736
  • 1
  • 35
  • 36
  • 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
  • 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. – Meglio Oct 28 '22 at 03:32