Firefox et style - propriete border vide

Version imprimable

03/12/2009, 16h42
Krishtov

Firefox et style - propriete border vide
Bonjour à tous,

Je souhaite récupérer la valeur d'une propriété CSS via Javascript.

HTML :
Code:

1 2 <div id="monDiv"></div>
CSS :
Code:

1 2 3 4 div#monDiv { border-width:1px; }
Javascript :

Code:

var toto = document.getElementById("monDiv").style.borderWidth;

Sous IE, pas de problème, je récupère la valeur, par contre sous FireFox, pas de valeur, j'ai une chaîne vide à la place et pour que cette donnée soit correctement renseignée, je dois utiliser l'attribut style de ma balise div.
Code:

1 2 <div id="monDiv" style="border-width:1px;"></div>
J'ai tenté une recherche sur le forum, mais je n'ai pas trouvé de réponse sur la façon de résoudre ce problème.

Merci de votre réponse.
03/12/2009, 16h50
gwyohm

Code:

document.defaultView.getComputedStyle(document.getElementById("monDiv"), null).borderWidth

Merci pour cette réponse, mais malheureusement cela ne change rien. voici le code complet de ma page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Page type</title>
    <script type="text/javascript">
    function init() {
		alert(document.defaultView.getComputedStyle(document.getElementById("monDiv"),null).borderWidth);
	}
	</script>
	<style type="text/css">
		div#monDiv {
			border-width: 1px;
			border-color: #000000;
			border-style: solid; 
		}
	</style>
</head>
<body onload="init();">
  <div id="monDiv">bla bla</div>
</body>
</html>

Ma version de Firefox : 3.5.5

03/12/2009, 17h46
Krishtov

Le problème semble venir des propriétés CSS "border", car en faisant un test avec d'autres propriétés, je ne rencontre pas de problème.

essaye ca

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
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).

04/12/2009, 10h36
Krishtov
J'ai compris mon problème :

En fait, sous firefox, il faut effectivement accéder à chaque côté ("right", "left", "top", "bottom") du bloc :

pour la bordure je dois donc par exemple utiliser :
Code:

1 2 document.defaultView.getComputedStyle( document.getElementById("monDiv"), null).borderRightWidth;
Pour récupérer l'épaisseur de la bordure droite et ainsi de suite avec les autres côtés du bloc.

Merci pour votre aide !