[DOM] recupération zIndex aléatoire

**riete** · 24/03/2009, 11h59

Si je click "Affiche index2" après le chargement la valeur de retour zIndex est vide.
Si je click "Change index2" puis "Affiche index2" à nouveau l'zIndex vaut 5, normal.

Pourquoi ne vaut-il rien au premier passage alors qu'il est définit dans le CSS avec la valeur 2?
Je ne comprends pas tous sur ce coup

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
<html>
<head>
<title>z-index</title>
<style type="text/css" title="text/css">
	body{ background-color: #000;}
 
	#z2{
		font-family: arial;
		font-size: 12px;
		font-weight: bold;
 
		padding: 4px;
		border: 2px solid lightgrey;
		width: 180px; height: 140px;
		position: absolute; left: 75px; top: 80px;
		background-color: yellow;
		z-index: 2;
	}
</style>
</head>
 
<body>
<button onclick="alert(document.getElementById('z2').style.zIndex);">Affiche index2</button>
<button onclick="document.getElementById('z2').style.zIndex = '5';">Change index 2</button>
 
	<div id=z2>z-index 2</div>
 
</body>
</html>

**RomainVALERI** · 24/03/2009, 12h02

Je ne pense pas que ça puisse provoquer l'erreur que tu constates, mais : a priori les valeurs des propriétés doivent être mises entre double quotes (pour l'id de ton div "z2") ...

Si ça ne change rien à ton problème (ce qui est probable).... j'ai rien dit ^^ (mais ça ne fera pas de mal en tout cas

)
Au moins tu y auras (un tout petit peu) gagné en termes de respect des normes xhtml...

**Bovino** · 24/03/2009, 12h19

Pourquoi ne vaut-il rien au premier passage alors qu'il est définit dans le CSS avec la valeur 2?

Précisément parce qu'il est défini en CSS et pas dans la propriété style de ton objet HTML en JavaScript, ce que tu corriges avec ton autre bouton.
Il ne faut pas confondre les attributs de balises, les attributs de style et les propriétés JavaScript.

EDIT :
Pour accéder aux valeurs définies en CSS, il faut passer par les propriétés rules / cssRules de la collection styleSheets

**RomainVALERI** · 24/03/2009, 12h26

Hum

Ah ben j'ai bien fait de participer à ce thread j'ai appris un truc plus qu'utile moi ^^
Merci à not' gourou ruminant de service

**SpaceFrog** · 24/03/2009, 12h50

un petit display block aiderait peut etre ?

sinon get computed style ...

ou jquery doit avoir un offset zindex ?

**riete** · 24/03/2009, 15h09

Envoyé par Bovino

Il ne faut pas confondre les attributs de balises, les attributs de style et les propriétés JavaScript.

Merci à tous, je découvre à mes dépends ces singulières propriétés qui ne sont pas héritées du CSS.

Envoyé par Bovino

Pour accéder aux valeurs définies en CSS, il faut passer par les propriétés rules / cssRules de la collection styleSheets

Tu veux dire comme le suggère SpaceFrog d'utiliser 'getComputedStyle' ?
Je suis en train de regarder cette fonction qui me semble pour le moment un peu obscure.
Je test et je reviens ici si besoin

Envoyé par SpaceFrog

un petit display block aiderait peut etre ?

Le 'block' c'est pour faire propre ? car s'il a une nécessité dans le cas présent, je n'arrive pas à la voir.

**SpaceFrog** · 24/03/2009, 16h01

non Bovinon suggerait d'attaquer le css en le parsant ...
cssRules ... selector ...

**Bovino** · 24/03/2009, 16h22

Ensuite, cela dépend de ce que tu souhaites récupérer.
Si c'est le style tel qu'il est affiché, effectivement, getComputedStyle / currentStyle sont suffisants, si c'est le style tel qu'il a été déclaré, alors il faudra parser les feuilles de style.

**riete** · 24/03/2009, 17h55

Envoyé par Bovino

Ensuite, cela dépend de ce que tu souhaites récupérer.
Si c'est le style tel qu'il est affiché, effectivement, getComputedStyle / currentStyle sont suffisants, si c'est le style tel qu'il a été déclaré, alors il faudra parser les feuilles de style.

Je crois comprendre ce que tu veux dire. Au chargement du document c'est le style définit par la CSS qui est pris en compte. Mais dès qu'il y a manipulation avec du code JS, c'est document.getElementById('z2').style.zIndex qu'il faut utiliser.
Dans ce cas je suggère de définir le style affiché susceptible d'être modifié, uniquement à partir des propriétés JS. Qu'en pense tu ?

En attendant, j'ai obtenu un résultat. Mais cela me semble très verbeux, y a t il a ton avis une méthode plus rapide pour obtenir le même résultat ? (bien entendu si la solution proposée plus haut est adopté ce code sera inutile).

Code :

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

1
2
3
4
5
6
7
8
9
function getStyle(obj){
		var doc = document.defaultView;
		var elem = document.getElementById(obj);
 
		var curStyle = doc.getComputedStyle(elem, "");
		var elemz = curStyle.getPropertyValue("z-index");
 
		alert(elemz);
	}

**Bovino** · 24/03/2009, 18h06

Si tu fais :

Code :

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

1
2
3
4
5
6
7
8
var elem = document.getElementById(obj);
var elemz;
if(elem.currentStyle){
    elemz = elem.currentStyle.zIndex;
}
else if(window.getComputedStyle){
    elemz = window.getComputedStyle(elem, null).zIndex;
}

Tu obtiens le z-index actuel (celui défini dans le CSS s'il n'a pas été modifié, celui défini en JavaScript si tu l'as modifié)

**riete** · 25/03/2009, 09h29

Effectivement c'est smart, mais cela ne s'invente pas ?

Pour ma part j'ai mis en place une solution qui fonctionne. Elle consiste à initialiser la valeur de mes zindex durant la procédure onload="init();".
Cela à l'avantage de ne pas m'encombrer avec le test. Au niveau lisibilité à posteriori par contre c'est surement moins bon.

Il faut faire le choix.

Merci en tous cas

A+

**Bovino** · 25/03/2009, 09h45

Hop la, attention !!!
Le test if else ne sert pas à vérifier si le style est défini, il prend juste en compte des méthodes différentes entre IE et FF !
currentStyle => méthode IE
getComputedStyle() => méthode DOM

**riete** · 25/03/2009, 15h25

Ola !! autant pour moi, je n'avais pas compris.
Je ne suis jamais obligé de prendre en compte IE car je travail en Intranet, j'ai délibérement dès le départ choisit FF et quelques Safari, je ne regrette rien, surtout depuis que j'utilise JS.

En tous cas je prends note, cette discussion m'aura apportée de nouvelles connaissances. Merci

**Bovino** · 25/03/2009, 15h46

Envoyé par riete

Je ne suis jamais obligé de prendre en compte IE car je travail en Intranet, j'ai délibérement dès le départ choisit FF et quelques Safari, je ne regrette rien, surtout depuis que j'utilise JS.

Dans ce cas :

Code :

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

1
2
var elem = document.getElementById(obj);
var elemz = window.getComputedStyle(elem, null).zIndex;

suffit

[DOM] recupération zIndex aléatoire

JavaScript

Discussions similaires

Partager

Partager