Z-Index per JS auslesen?

[BigRob]

Hi Leute,

ich wollte nur mal fix eine kurze JS-Funktion schreiben. Doch nun verzweifel ich daran. Eigentlich besteht das Problem beim Auslesen des Z-Indexes. Ist eigentlich recht simpel:


function navigation(div1,div2,div3){

var z1 = document.getElementById(div1).style.zIndex;
var z2 = document.getElementById(div2).style.zIndex;
var z3 = document.getElementById(div3).style.zIndex;
var max = 0;


if (z1 < z2)
{
max = z2;
}
if (z2 < z1)
{
max = z1;
}
if (z3 > max)
{
max = z3;
}

max = max+1;
document.getElementById(div1).style.zIndex = max;
document.getElementById(div2).style.zIndex = z2;
document.getElementById(div3).style.zIndex = z3;

}

z1, z2 und z3 bleiben immer 0.

hat jemand eine Idee?

[-Saphrex-]

document.getElementById("div1").style.zIndex

hilft das weiter?

[RattuS]

Sind denn überhaupt Initialwerte für den z-Index gesetzt? Du kannst nicht auslesen, was nie gesetzt wurde.

[BigRob]

ja Initialwerte sind gesetzt.

@-Saphrex-:

getElementById("div1") kann leider nicht funktionieren, weil div1, div2 und div3 die übergebenen parameter sind. "div1" wäre ja ein statischer string.

[DanMan]

Wie wärs damit:
if (z1 <= z2) {
max = z2;
}
if (z2 <= z1) {
max = z1;
}
if (z3 >= max) {
max = z3;
}
Lass dir doch einfach mit console.log() o.ä. ausgeben welche Werte z1-3 haben.

[Sephiroth]

Es gib übrigens eine max-Funktion (http://de.selfhtml.org/javascript/objekte/math.htm#max) :biggrin:
max = Math.max(z1, Math.max(z2, z3));

edit:
ach dein Problem ist ja schon das Auslesen ... object.style.XX funktioniert nur, wenn das Style-Attribut inline gesetzt ist! Du brauchst daher getComputedStyle (https://developer.mozilla.org/En/DOM/Window.getComputedStyle).


var style=getComputedStyle(document.getElementById(div1));
var z1=style.getPropertyValue("z-index");


... oder mach es dir einfach und nimm jQuery .css (http://api.jquery.com/css/)

[BigRob]

Problem gelöst. Danke Leute!

Zur abschließenden Dokumentation:

HTML:



<div id="XX" onclick="navigation(this)">
<p>test3</p>
</div>




JavaScript:



function navigation(div1){

var div_n1 = document.getElementById('JU');
var div_n2 = document.getElementById('TU');
var div_n3 = document.getElementById('Kontakt');

if (window.getComputedStyle) {
var style1 = window.getComputedStyle (div_n1, "");
var style2 = window.getComputedStyle (div_n2, "");
var style3 = window.getComputedStyle (div_n3, "");
}
else {
var style1 = div_n1.currentStyle;
var style2 = div_n2.currentStyle;
var style3 = div_n3.currentStyle;
}

var z1=style1.zIndex;
var z2=style2.zIndex;
var z3=style3.zIndex;

max = Math.max(z1, Math.max(z2, z3));

max = max+1;
div1.style.zIndex = max;

}