Firefox et style - propriete border vide

**Krishtov** · 03/12/2009, 16h42

Bonjour à tous,

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

HTML :

Code :

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

1
2
 
<div id="monDiv"></div>

CSS :

Code :

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

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

Javascript :

Code :

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

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 :

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

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.

**gwyohm** · 03/12/2009, 16h50

Code :

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

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

**Krishtov** · 03/12/2009, 17h10

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

Code :

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

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

**Krishtov** · 03/12/2009, 17h46

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.

**kimjoa** · 03/12/2009, 17h48

essaye ca

Code :

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

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).

**Krishtov** · 04/12/2009, 10h36

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 :

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

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 !

Firefox et style - propriete border vide

JavaScript

Vue hybride

Discussions similaires

Partager

Partager