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