javascript - How to characterize z-indexing for the DOM? (2) -

i've been bit care-less choosing z-indexes in css.

i'd traverse dom , report z-indexes respective id's.

for example:

id           z-index header       10 main         0 menu         20 

the end result object keys element id , value z-index. 1 might call z_obj

// pseudo code  var z_obj = {el_id: el_zindex}; 

getting z-index each element ( el ) should easy using filter , code below:

// attr attribute data = _.filter(el.attributes, function (attr) {     return (/^z-index/).test(atttr.name); }); 

but how traverse dom z-indexes , store in object?

i'd w/ out libraries, , using code above if possible.

this debug tool in general.

you can elements getelementsbytagname("*"), iterate on collection for loop, , use window.getcomputedstyle(node). there, can retrieve z-index. here's example:

var zobj, allels, i, j, cur, style, zindex;  zobj = {}; allels = document.body.getelementsbytagname("*"); (i = 0, j = allels.length; < j; i++) {     cur = allels[i];     style = getcomputedstyle(cur);     zindex = style.getpropertyvalue("z-index");     zobj[cur.id] = zindex; } 

demo: http://jsfiddle.net/mj3cr/1/

where zobj object, keys represented id attributes, , values represented z-index style.

note getcomputedstyle not supported in ie < 9, of course there many polyfills :)