Discussion :

[Totila]

Bonjour à la communauté,

Ceci est mon premier message, aussi, s'il n'est pas à sa place ni conforme, merci de m'indiquer la marche à suivre. Maintenant j'en viens au fait.

Dans un script en Javascript, je cherche à obtenir la valeur de padding-Bottom mais ... je n'y arrive pas. J'essayai :
- document.getElementById('conteneur_general').style.paddingBottom qui donne "",
- document.getElementById('conteneur_general').paddingBottom qui donne "undefined",
- à tout hasard, document.getElementById('conteneur_general').offsetHeight, bien que non conforme, marche et donne "16" mais ce n'est pas la valeur dont jai besoin.

Note : les guillemets de chaque côté du résultat y sont pour mieux le voir mais n'en font pas partie.

Je vous saurais vivement gré de me dire si ce que je cherche est possible et si oui, comment.

Merci de votre réponse et
Meilleures salutations

[E.Bzz]

Bonjour, et bienvenue sur Developpez.com !
(même si tu avais en fait déjà posté )

Dans un script en Javascript, je cherche à obtenir la valeur de padding-Bottom mais ... je n'y arrive pas.

Pour pouvoir le récupérer, il faut qu'il ait été explicitement défini (en CSS ou Javascript).
Est-ce le cas ?

A+

[kimjoa]

pour récupéré une valeur écrite dans une css il te faut cette fonction crosse browser

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var getStyle = function(/*DOMObject*/element, /*string*/rule){//peux etre definit en globale car très utilise, aucune dépendance...
    var camelRule=rule.replace(/\-(\w)/g, function (strMatch, p1){return p1.toUpperCase();}),//supprime les tiré et met en majuscule la lettre suivante
        value = element.style[camelRule];
    if (!value){
        if(document.defaultView && document.defaultView.getComputedStyle){
            value = document.defaultView.getComputedStyle(element, "").getPropertyValue(/*fait l inverse de camelRule*/rule.replace(/[A-Z]/g, function(match){return '-'+match.charAt(0).toLowerCase();}));
        }else{//specifique ie
            value = element.currentStyle[camelRule] ;
        }
    }
    return value == 'auto' ? undefined : value;
};

Cependant les retours des paddings , margins, et borders diffère en fonction du navigateur.
Pour certain il ne retourneront pas un simple padding , mais il faudra être plus précis en indiquant la direction (padding-left).

A toi de compléter la fonction a++

[Totila]

Merci de vos réponses :
- je n'ai pas encore compris celle de kimjoa de par mon piètre niveau en JavaScript mais je vais tâcher !
- quant à celle d'E.Bzz : la valeur est bel et bien déclarée, dans un fichier externe css invoqué par <link href="Styles/le_fichier_en_question.css" rel="stylesheet" type="text/css" />. J'ai cru, de par la mention d'explicite (à croire qu'on parle d'un porno !) que l'erreur venait de ce que le fichier contenait seulement padding: 8px; mais remplacer cette déclaration par :
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
ne changea rien du tout ; autrement dit, le pb reste entier.

Je continue donc de chercher, hum, et de m'apprêter à lire vos réponses.

Meilleures salutations.

[Invité]

jour

ce que tu doit comprendre c'est que pour lire dans un fichier css tu doit utiliser deux syntaxes une pour ie et une pour les autres navigateur

si tu utilise style ou getattribute le navigateur ira cherche dans la balise incremine et pas dans le fichier css

monsieur ie

Code :

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

1
2
 
value = document.getElementById('monelement').currentStyle.paddingLeft

messieurs les autres

Code :

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

1
2
 
value =getComputedStyle(document.getElementById('monelement'), null).getPropertyValue('padding-left')

[SpaceFrog]

oui c'est curieux comme avec le padding on est obligé d'en faire des tonnes ;

[Invité]

tout a fait

je l'avait oublier lui

[Totila]

(...) pour lire dans un fichier css tu doit utiliser deux syntaxes une pour ie et une pour les autres navigateur (...)

Merci beaucoup ; grâce à cette information et aux solutions fournies, j'installai le test if (navigator.userAgent.indexOf("MSIE") != -1) et maintenant, ça marche bien avec Internet Explorer et Firefox qui rendent "5px". Par contre, Safari, Opera et Chrome retournent la valeur "0px" ; aheum.

Depuis le début, j'avais oublié de dire que ma machine est sous Windows XP pro SP3 et que je n'essaie que les dernières versions des navigateurs.

À votre bon cœur pour me permettre de continuer.

[Totila]

J'ai avancé ce week-end. Opera semble marcher. Quant à Safari et Chrome, j'ai enfin pu obtenir un bon résultat en mettant le style directement grâce à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
<!--
#conteneur_general {
	margin: 0px;
	padding-top: 2px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
}
-->
</style>

mais ça ne marche pas si le style #conteneur_general est dans un fichier externe lié par <link href="Styles/Styles_base.css" rel="stylesheet" type="text/css" />. En fait, j'essayai les deux solutions précédentes en les plaçant dans un fichier Metadonnees.php que le fichier de départ invoque par <?php include('Metadonnees.php'); ?>. Du coup, j'essayai

Code :

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

1
2
3
4
5
<style type="text/css">
<!--
<?php include('Styles/Styles_base.css'); ?>
-->
</style>

qui marche mais Dreaweaver CS4 dont je me sers ne semble pas aimer l'imbrication de la fonction php include. En effet, il ne voit plus les styles et c'est impossible de travailler comme ça. Il ne me reste plus qu'à mettre en dur le contenu du fichier Styles_base.css entre les balises <style type="text/css"> et </style> du fichier Metadonnees.php. Tout ça est bien lourd.

Meilleures salutations.