Lire la valeur d'une propriété CSS par le Javascript

Version imprimable

11/07/2008, 14h51
boutmos

Lire la valeur d'une propriété CSS par le Javascript
Bonjour,

Sur mon tag body, dans ma feuille CSS, j'ai defini une hauteur en px pour ma font.

J'ai besoin de récupérer cette valeur a l'aide d'une fonction javascript. J'ai écrit ceci :
Code:

1 2 3 function getFontSize() { var defautFontSize = document.getElementsByTagName("body")[0].style.fontSize); }
Mais si je place un alert, çà ne me retourne rien du tout... Merci

essaye avec ceci

Code:

1
2
3
4
5
6
7
8
9
function OffsetStyle(Obj,Prop)
{
	var x = Obj;
	if (x.currentStyle)
		var y = x.currentStyle[Prop];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(Prop);
	return y;
}

Code:

OffsetStyle(document.body,'fontSize')

11/07/2008, 16h25
boutmos

Humm j'ai peut etre loupé quelquechose mais la fonction ne me retourne rien non plus :cryyy
11/07/2008, 16h33
SpaceFrog

Comment l'implémentes tu ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript'>
function OffsetStyle(Obj,Prop)
{
	var x = Obj;
	if (x.currentStyle)
		var y = x.currentStyle[Prop];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(Prop);
	return y;
}
</script>
<body>
<input type="button" onclick="alert(OffsetStyle(document.body,'fontSize'))" value='size' />
 
</body>

11/07/2008, 16h38
boutmos
exactement comme tu l'as faite, j'ai mis la fonction dans mon fichier .js

puis dans une autre fonction qui est appellé sur un evenement onclick je mets ceci : (J'ai pour le moment juste fait l'appel pour voir ce qui est retourné par ta fonction)
Code:

1 2 3 4 5 6 7 8 function changerTaille(Pas) { var defaultFontSize = offsetStyle(document.body,'fontSize'); alert(defaultFontSize); ... ... }
11/07/2008, 16h39
SpaceFrog

en effet sous Firfox cela semble poser problème ...
je regarde de plus près ...

sous IE ça fonctionne
11/07/2008, 16h43
boutmos

erf lol juste au meme moment je viens de me rendre compte que çà marche bien sous IE mais pas FF .... la poisse , c'est mon boss que çà va encore bien faire rire !! :D Merci

Bon voilà ce petit desagrément resolu ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript'>
function OffsetStyle(Obj,Prop)
{
	var x = Obj;
	if (x.currentStyle){var y = x.currentStyle[Prop];}
	else if (window.getComputedStyle){	var y = window.getComputedStyle(x,null)[Prop];}
	return y;
}
</script>
<body>
<input type="button" onclick="alert(OffsetStyle(document.body,'fontSize'))" value='size' />
 
</body>
 
</html>

juste à Noter que IE retourne 12pts et FFX 14px docs méfiance
Mais on peut convertir ...

11/07/2008, 16h52
boutmos

Ah super çà marche, je pense que j'aurais pu trouver car c'est vrai que sur l'affectation de variable dans le else if , j'avais vu le Prop entre parenthese alors qu'au dessus , tu le mets entre crochet...

Merci beaucoup et bon week end a vous.
11/07/2008, 16h56
SpaceFrog

non les parenthèses n'ont pas amélioré le code ...

tu peux faire sans (syntaxe permissive si tu n'as qu'eun ligne d'instruction ...

ce qui a changé c'est le window.getComptuedStyle ... au lieu de document ...