Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

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

5 réponses
Avatar
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

5 réponses

Avatar
Thibaut Allender

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

Avatar
Bobe
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"

Avatar
Bobe
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"

Avatar
Thibaut Allender
Ç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

Avatar
Julien
Merci beaucoup pour ces bonnes informations chers amis !


"Bobe" a écrit dans le message de
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"