Accéder aux propriétés d'une class ?

Le
Julien
Bonjour à tous,
sous IE6, voici le code :

<div id="bouton1" class="bouton"
onclick="alert(document.getElementById('bouton1').style.top)"></div>
<div id="bouton2"
style="width:50px;height:50px;background-color:red;position:absolute;top:200
px;" onclick="alert(document.getElementById('bouton2').style.top)"></div>

Qd je clique sur le bouton2, l'alert me renvoit bien la valeur top, et pas
pour le bouton1 (dont le fichier CSS est un "<link rel="stylesheet"
href="_style.css" type="text/css">") !

Que faire ?

Merci
Vos réponses
Trier par : date / pertinence
Thibaut Allender
Le #64382

Qd je clique sur le bouton2, l'alert me renvoit bien la valeur top, et pas
pour le bouton1 (dont le fichier CSS est un "<link rel="stylesheet"
href="_style.css" type="text/css">") !

Que faire ?


tu dois utiliser document.getElementById('bouton1').offsetTop pour
recuperer la position Y de bouton1, et non simplement acceder à ses
styles, qui ne sont ici pas déclarés.

--
thibaut allender | freelance | http://capsule.org

Bobe
Le #63745
Thibaut Allender nous a dit le 25/01/2005 18:47:

tu dois utiliser document.getElementById('bouton1').offsetTop pour
recuperer la position Y de bouton1, et non simplement acceder à ses
styles, qui ne sont ici pas déclarés.



Ça ne marchera pas car cette propriété renvoie la distance par rapport
au bord supérieur du bloc parent.
Firefox renvoie la distance par rapport au bord supérieur du BODY mais
c'est un bug.

--
Bobe (Aurélien Maille)
http://webnaute.net

"la vie d'un geek est un combat perpétuel contre l'imperfection"

Bobe
Le #63744
Julien nous a dit le 25/01/2005 11:13:

Qd je clique sur le bouton2, l'alert me renvoit bien la valeur top, et pas
pour le bouton1 (dont le fichier CSS est un "<link rel="stylesheet"
href="_style.css" type="text/css">") !

Que faire ?



C'est normal car l'objet style d'un élément (ici un bouton) est un
raccourci pratique vers le contenu de l'attribut HTML "style".

Pour ton bouton #bouton1, ses styles CSS ne sont pas déclarés via
l'attribut HTML "style" donc ils ne sont pas accessibles par cet objet
style.

Pour obtenir l'objet style contenant les valeurs calculées de chaque
propriété CSS, il faut utiliser la méthode getComputedStyle():

Dans ton exemple:

<div id="bouton1" class="bouton"
onclick="alert(getComputedStyle(document.getElementById('bouton1'),
null).top)"></div>

Pour MSIE, utiliser l'objet currentStyle au lieu de style:

<div id="bouton1" class="bouton"
onclick="alert(document.getElementById('bouton1').currentStyle.top)"></div>

--
Bobe (Aurélien Maille)
http://webnaute.net

"la vie d'un geek est un combat perpétuel contre l'imperfection"

Thibaut Allender
Le #63736
Ça ne marchera pas car cette propriété renvoie la distance par rapport
au bord supérieur du bloc parent.
Firefox renvoie la distance par rapport au bord supérieur du BODY mais
c'est un bug.


je cherchais apres getComputedStyle() mais je ne me souvenais plus de la
syntaxe exacte :)
merci pour les precisions

--
thibaut allender | freelance | http://capsule.org

Julien
Le #63431
Merci beaucoup pour ces bonnes informations chers amis !


"Bobe" news:41f7840d$0$2181$
Julien nous a dit le 25/01/2005 11:13:

Qd je clique sur le bouton2, l'alert me renvoit bien la valeur top, et
pas


pour le bouton1 (dont le fichier CSS est un "<link rel="stylesheet"
href="_style.css" type="text/css">") !

Que faire ?



C'est normal car l'objet style d'un élément (ici un bouton) est un
raccourci pratique vers le contenu de l'attribut HTML "style".

Pour ton bouton #bouton1, ses styles CSS ne sont pas déclarés via
l'attribut HTML "style" donc ils ne sont pas accessibles par cet objet
style.

Pour obtenir l'objet style contenant les valeurs calculées de chaque
propriété CSS, il faut utiliser la méthode getComputedStyle():

Dans ton exemple:

<div id="bouton1" class="bouton"
onclick="alert(getComputedStyle(document.getElementById('bouton1'),
null).top)"></div>

Pour MSIE, utiliser l'objet currentStyle au lieu de style:

<div id="bouton1" class="bouton"

onclick="alert(document.getElementById('bouton1').currentStyle.top)"></div>


--
Bobe (Aurélien Maille)
http://webnaute.net

"la vie d'un geek est un combat perpétuel contre l'imperfection"



Publicité
Poster une réponse
Anonyme