Search code examples
javascriptcssz-index

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

So normally we can get z-Index value of a div element using, e.g: 

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

I am using this value in my code to do something. Now the problem is with default values where there is nothing defined in HTML code (or even in cases where z-Index is defined in external css), the same java script command returns nothing.

I understand that in default case, normally the browser decides the rendering based upon element stack. But is there any specific value or way to realize this in JavaScript that there is no value defined??

I mean, normally nothing returned would mean there is no value defined. But it also happend with external css, so how can i distinguish the both??

Solution

  • You might try window.getComputedStyle() on the element:

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

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

    I got these values: "auto", "10". After changing: z-index: 10, position: relative.