Accéder au DOM

Bonjour,

oui c'est sans doute bête comme question mais je coince : je n'arrive
pas à _récupérer en JS_ certains attributs _définis en CSS_.

Par exemple :
dans la feuille de style il y a :
#myObj {padding:10px;}
Plus tard, en JS, si je veux connaître le paddingRight (par exemple), eh
bien "myObj.style.paddingRight" est vide. Sous IE, il y a un "hack" qui
est "myObj.currentStyle.paddingRight" mais sinon (FF, W3C...) quid ?

NB1: myObj est récupéré proprement
NB2: le DOM Inspector de FF donne les bonnes infos dans les "Computed
Style". Ca rassure un peu, c'est qu'il y a moyen d'accéder à l'info ?

Help !

function voir(qui,quoi)
{
var monelement = document.getElementById(qui);

if (document.defaultView && document.defaultView.getComputedStyle) {
var
lestyle=document.defaultView.getComputedStyle(monelement,'').getPropertyValue(quoi);
}

alert (lestyle);
}


<div id="toto" onclick="voir('toto','padding-left');">

Marche dans Gecko et les derniers Opera, j'ai pas de Safari sous la main
pour tester mais il me semble que c'est bon.

Pascal

olivier wrote:

Bonjour,

[..]

Plus tard, en JS, si je veux connaître le paddingRight (par exemple), eh
bien "myObj.style.paddingRight" est vide. Sous IE, il y a un "hack" qui
est "myObj.currentStyle.paddingRight" mais sinon (FF, W3C...) quid ?

document.getElementById("myObj").style.paddingRight ?

olivier wrote:

Bonjour,

[..]

Plus tard, en JS, si je veux connaître le paddingRight (par exemple),
eh bien "myObj.style.paddingRight" est vide. Sous IE, il y a un "hack"
qui est "myObj.currentStyle.paddingRight" mais sinon (FF, W3C...) quid ?

document.getElementById("myObj").style.paddingRight ?

Non, là tu accèdes à la valeur de l'attribut style, donc ça ne marchera
pas avec les feuilles de style, seulement les styles en ligne (j'ai
longtemps buté là dessus avant qu'on me l'explique ;) ).

Pascal

Marche dans Gecko et les derniers Opera, j'ai pas de Safari sous la main
pour tester mais il me semble que c'est bon.

Excellent merci.
J'ai adapté ça à mon besoin pour avoir un appel unique IE / FF+Opera...

function getStyleProp(qui,quoi) // FF+IE proof
{
var monelement = document.getElementById(qui), p=null;
if (document.defaultView && document.defaultView.getComputedStyle)
/*FF*/p=eval("document.defaultView.getComputedStyle(monelement,'')."+quoi);
else if (monelement.currentStyle) /*IE*/
p=eval("monelement.currentStyle."+quoi);
return p;
}
on appelle la function avec la propriété JS non pas CSS
getStyleProp("myObj", "paddingRight"); // et non "padding-right"

D'ailleurs qqn sait si 1 mécanisme existe pour passer de "paddingRight"
à "padding-right" (i.e. pour toutes les prop. CSS) ?

merci
--
olivier

function voir(qui,quoi)
{
var monelement = document.getElementById(qui);

if (document.defaultView && document.defaultView.getComputedStyle) {
var
lestyle=document.defaultView.getComputedStyle(monelement,'').getPropertyValue(quoi);

}

alert (lestyle);
}


<div id="toto" onclick="voir('toto','padding-left');">

Marche dans Gecko

oui, mais je n'ai pas réussi à récupérer : border-left (c'est vide)

#toto { border-left: 2px solid red; padding-left: 70px; }


--
Stephane Moriaux et son [moins] vieux Mac

Bonjour,

oui c'est sans doute bête comme question mais je coince : je n'arrive
pas à _récupérer en JS_ certains attributs _définis en CSS_.

Par exemple :
dans la feuille de style il y a :
#myObj {padding:10px;}
Plus tard, en JS, si je veux connaître le paddingRight (par exemple), eh
bien "myObj.style.paddingRight" est vide. Sous IE, il y a un "hack" qui
est "myObj.currentStyle.paddingRight" mais sinon (FF, W3C...) quid ?

NB1: myObj est récupéré proprement
NB2: le DOM Inspector de FF donne les bonnes infos dans les "Computed
Style". Ca rassure un peu, c'est qu'il y a moyen d'accéder à l'info ?

Salut,

Alors pour connaitre les correspondances entre les propriétés CSS et les
attributs Javascript, tu peux toujours facilement retrouver cet article:
http://developpeur.journaldunet.com/tutoriel/dht/050204-javascript-references-css-proprietes-conversion.shtml
via google "journal du net propriétés css javascript"

Mais pour ton cas, peut-etre que puisque tu n'a pas fait "padding-right:
10px", alors la propriété du DOM n'est pas renseignée ...

Faire confiance aux hacks IE, n'est en général pas la bonne idée et
encore moins la bonne solution.
Essaie en faisait: padding: 10px 10px 10px 10px;

Bon courage.


--
Thibault Taillandier

Alors pour connaitre les correspondances entre les propriétés CSS et
les attributs Javascript, tu peux toujours facilement retrouver cet
article:
Les retrouver "à la main" c'est pas difficile. Je réfléchissais à une

correspondance "automatique". Voici ce que j'ai trouvé :

sous IE :
obj.currentStyle[attrCSS] <=> eval("obj.currentStyle."+propDOM)
sous FF :
document.defaultView.getComputedStyle(obj,null).getPropertyValue(attrCSS)
<=> eval("document.defaultView.getComputedStyle(obj,null)."+propDOM)

Drôle de salade ;-)

Faire confiance aux hacks IE, n'est en général pas la bonne idée et
encore moins la bonne solution.
Ne pas utiliser les hacks IE hors de IE, merci du conseil ;-) Mais dans

IE, où est le problème selon toi ?

Essaie en faisait: padding: 10px 10px 10px 10px;
Vois-tu ma question était _générale_ et le point particulier du

padding-right un exemple. Beaucoup d'objets ont des propriétés héritées,
par défaut, modifiées dynamiquement, etc. dont il est parfois utile de
récupérer la valeur. C'était l'esprit de ma question.

@+
--
olivier

*olivier* @ 13/04/2006 12:18 :

Bonjour,

oui c'est sans doute bête comme question mais je coince : je n'arrive
pas à _récupérer en JS_ certains attributs _définis en CSS_.

Par exemple :
dans la feuille de style il y a :
#myObj {padding:10px;}
Plus tard, en JS, si je veux connaître le paddingRight (par exemple), eh
bien "myObj.style.paddingRight" est vide. Sous IE, il y a un "hack" qui
est "myObj.currentStyle.paddingRight" mais sinon (FF, W3C...) quid ?

NB1: myObj est récupéré proprement
NB2: le DOM Inspector de FF donne les bonnes infos dans les "Computed
Style". Ca rassure un peu, c'est qu'il y a moyen d'accéder à l'info ?

Help !

Chuis pas top en JS/DOM, mais je doute que le nom de la propriété change
de JS (ici "paddingRight") à CSS ("padding-right"), je crois me souvenir
d'y avoir accédé une fois par

style["padding-right"]

++