Acceder à la valeur CSS "zIndex"

**themoye** · 30/04/2008, 18h19

Bonjour tout le monde !

Ca fait quelques jours que je galère pour récupérer le contenu d'une variable dans mon fichier CSS, la valeur zIndex.
J'en ai besoin pour jouer sur la profondeur de différents calques visibles à l'écran.

Les valeurs de mes variables CSS sont données dans un fichier .scc, déclaré entre les balises <head> et </head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="Calques.css" media="screen" />

J'ai tenté plusieurs approches pour récupérer le contenu de zIndex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
objectJavascript = document.getElementById("Calque1");
document.getElementById('AffCalque1').value = objectJavascript.style.zIndex;
 
document.getElementById('AffCalque1').value = document.defaultView.getComputedStyle(("Calque2",null)[zIndex]

La première ligne me retourne une valeur vide, et la seconde me retourne "Auto".
A noter que parfois, la première ligne me retourne tout de même la profondeur de calque correcte, impossible de savoir pourquoi ^^

Existe il un moyen sure de retourner la valeur zIndex d'un élément?

Merci d'avance pour vos réponses !

**SpaceFrog** · 30/04/2008, 18h51

le z-index est il initialisé das nles balises ?

**themoye** · 30/04/2008, 18h56

Non non, comme je l'ai expliqué plus haut, il est initialisé dans le .css chargé au début de ma page, entre les balises <head>

**SpaceFrog** · 30/04/2008, 20h55

1) essaye de mettre !important dans ton css ..

2) l'objet aura sinon par defaut le zindex de son parent
essaye de scanner tous les objets de la page pour initialiser leur zindex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 def = Obj.style.zIndex;
 return (def == "") ? "inherit" : def;

**themoye** · 01/05/2008, 03h11

Plop

!important ne change rien.
Je n'ai pas encore testé ton petit bout de code pour scanner les objets (je regarderais demain matin, il est tard ^^), mais j'ai changé l'initialisation de mes zIndex.
Au lieu de les initialiser dans mon fichier css, je les initialisent dans leurs balises <div>.
C'est moins propre, mais ça fonctionne.

D'autres idées pour accéder à mes zIndex depuis mon fichier css ?

**SpaceFrog** · 01/05/2008, 10h03

Oui quand je parlais d'initialiser, je voulais dire dans les balises

Si taper les cssRules du fichier css avec javascript pour attribuer dynamiquement le zindex ...

Mais c'est curieux que le !important au niveau de css ne fasse rien ...

tu peux nous montrer une petit exemple de css et de html ?

**themoye** · 01/05/2008, 12h50

Le problème n'est pas au niveau de l'interprétation du contenu des variables, mes différents <div> sont bien positionnés, leur profondeur correspond bien au zIndex initialisé dans mon fichier css.
Juste la tentative de récupération du contenu de la variable qui merdouille en retournant "auto" ou une chaîne vide.

Un bout de mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
### Entre les balises <head> ###
<link rel="stylesheet" type="text/css" href="Calques.css" media="screen" />
 
<script type="text/javascript">
       function aff()
       {
                var id="CV";
		objectJavascript = document.getElementById(id);
		var prof = objectJavascript.style.zIndex;
 
		alert("id = "+id+" et prof = "+prof);
       }
</script>
 
### Entre les balises <body> ###
        <div class="Fenetre" id="CV">
		<div class="Titre">
			<img src="User.png" align=absmiddle />
			<a href="#" onclick="calques('CV')">Curiculum Vitae</a>
		</div>
		<div class="ContenuFenetre" style="background-color:#FF8962;">
 
			<p>
 
				test test test test test test test!
 
			</p>
		</div>
 
		<div class="Pied">
			<a href="#" onclick="calques('CV','Accueil')">Retour au Curiculum Vitae</a>
		</div>
 
	</div>

Un appel à la fonction aff() me retourne par exemple :

id = CV et prof =

Dans mon css, les id contenants une valeur zIndex sont déclarés comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#CV
{
	left:130px;
	top:135px;
        z-index:2;
}

**SpaceFrog** · 02/05/2008, 08h59

Encore une fois IE ne repsecte pas les standards :

donc voici comment récupérer universellement le Zindex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function GetZindex(ObjId){
var MonObj =document.getElementById(ObjId);
ZI=(document.all)?MonObj.currentStyle.zIndex:window.getComputedStyle(MonObj,"").getPropertyValue("z-index");
return ZI}

Acceder à la valeur CSS "zIndex"

JavaScript

Partager

Partager