[DOM] Amélioration d'un fonction pour la taille des polices

**boutmos** · 18/08/2008, 16h11

Bonjour,

Suite a un petit passage ici , j'ai eu de l'aide pour réaliser une fonction me permettant de récupérer l'attribut CSS de la propriété fontSize d'un element HTML. cet element en question est le body. En jouant sur son fontSize, je peux donc augmenter/diminuer l'ensemble des éléments text de mon document.

Mais problème... des que je me retrouve sur un élément dont j'ai attribuer une taille de font dans un fichier CSS ou si je retombe sur un tag du genre h1, h2 , etc ... sa propriété fontSize n'est pas affectée par ma fonction. J'ai essayé plusieurs méthode mais en vain. ci dessous le code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// #########################################################################################
// Gestion des tailles de Polices
// #########################################################################################

var initialFontSize = '12px';					//Definition de la taille de la font a la 1ere visite
var currentFontSize = getCookie("fontSize");	//Variable globale pour recuperer la taille de font defini dans le cookie "fontSize"

//Si le cookie contenant la taille courante de la font n'existe pas , on le crée et on lui passe en argument la taille de font initiale + on initialise aussi la propriété CSS du body avec cette taille de font initiale
if (getCookie("fontSize") == null) {
	setCookie("fontSize", initialFontSize, dateExpiration, "/");
	location.reload();	/*Pas tres correct mais utilisé uniquement a la 1ere visite (pour rectifier la taille de la Font)*/
}

//Des que le chargement est fini, on applique de suite au document la taille de la font memorisée dans le cookie 'fontSize'
window.onload = function setFontSize() {
	document.getElementsByTagName("body")[0].style.fontSize = currentFontSize;
}

/* Fonction qui permet de recuperer la propriété CSS d'un objet */
function offsetStyle(Obj,Prop) {
	var x = Obj;
	// Méthode pour IE
	if (x.currentStyle){var y = x.currentStyle[Prop];}
	// Méthode pour FF & Co
	else if (window.getComputedStyle){var y = window.getComputedStyle(x,null)[Prop];}
	return y;
}

var getFontSize;		// Chaine de caracteres contenant la taille de la police du body
var defaultFontSize;	// Même chaine avec le 'px' en moins

/* Fonction qui permet d'augementer ou de diminuer la taille de la fonte qui est associée au tag body */
function changerTaille(valeurPas) {
	//Recuperation
	getFontSize = offsetStyle(document.body,'fontSize');
	
	//Conversion de la chaine en nombre entier		
	defaultFontSize = getFontSize.substring(0, getFontSize.length-2);
	defaultFontSize = parseInt(defaultFontSize);

	//Operation
	defaultFontSize = defaultFontSize + valeurPas;

	//Affectation au style du document
	document.getElementsByTagName("body")[0].style.fontSize = defaultFontSize + "px";

// Execptions : h1,h2, etc ...
	var allh1 = document.getElementsByTagName("h1");
	var cpt = 0;

	while (allh1[cpt]) {
		document.getElementsByTagName("h1")[cpt].style.fontSize += valeurPas +'px';
		cpt++;
	}
// -- Fin des exceptions
	
	//On sauvegarde la nouvelle taille dans le cookie "fontSize"
	setCookie("fontSize", defaultFontSize + "px", dateExpiration, "/");
}

Le code en rouge c'est ce que j'ai essayé de faire, çà affecte bien les balise h1 mais comme je n'arrive pas a recuperer la valeur de la proprété fontSize...d'ailleur, je ne comprend pas pourquoi offsetStyle(document.h1[cpt],'fontSize'); ne fonctionne pas non plus.

cdt

**Bovino** · 18/08/2008, 16h36

Code :

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

document.getElementsByTagName("h1")[cpt].style.fontSize += valeurPas +'px';

Aie ! Tu additionnes quoi, des tomates, des pommes et des pixels ???

**Oscar Hiboux** · 18/08/2008, 16h44

lol, on va bien manger !

Effectivement, pense à faire ton petit calcul de taille de façon claire avant de greffer le suffixe "px" lors de l'affectation. Ton style ne doit pas être "12px15px10px", il vaudrait mieux que ce soit "37px" (12 + 15 + 10 "px").

**boutmos** · 18/08/2008, 17h20

oui je sais tres bien que ce n'est pas tres clair de ce coté la mais, je l'ai laissé plus pour vous montré ma demarche qu'autrechose. Le probleme ne vient pas de cette addition, 'fin a moins que mon code soit bon et que je l'ai sous estimé sans trop prendre garde a celle ci , quoi qu'il en soit j'ai effectué pleins de test et je suis arrivé a rien du tout.

A un moment je me suis senti proche de la solution, j'avais fait un

Code :

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

1
2
3
4
5
6
7
8
// Execptions : h1,h2, etc ...
	var allh1 = document.getElementsByTagName("h1");
	var cpt = 0;
	while (allh1[cpt]) {
		allh1[cpt].style.fontSize = 20 +"px";
		cpt++;
	}

mais en effet, mes balises h1 etaient affectées par la taille fixée alors j'ai essayé de récupérer la valeur initiale de celles ci part un :
var geth1FontSize = document.getElementsByTagName("h1")[cpt].style.fontSize;

ou autre
var geth1FontSize = offsetStyle(document.h1[cpt],'fontSize');

Je en sais plus laquelle de ces 2 methode mais un debuggage sans erreures a coup d'alert me renvoyé rien ... un bon gros alert bien vide ^^

Merci

**Matthieu2000** · 18/08/2008, 17h25

on te dit de faire un parseInt....

**Oscar Hiboux** · 18/08/2008, 17h41

Roh, lui ! Le pète-sec !

En effet, par exemple :

Code :

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

parseInt("12px") // retourne l'entier 12

Code :

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

window.getComputedStyle(title)["fontSize"] // retournera qqchose comme "12px", soit une chaîne de caractères

donc, même si tu tronques cette chaîne, ça restera une chaîne. L'intérêt de parseInt c'est que tu joueras ensuite avec des entiers et l'usage de l'opérateur "+" sur des entiers ou des chaînes de caractères n'a pas tout à fait le même effet...

Code :

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

1
2
12 + 15 + 10 // 37 -> entiers
"12" + "15" + "10" // = "151210" -> chaînes de caractères

**boutmos** · 18/08/2008, 18h04

En effet oui je connais parfaitement l'usage de parseInt et de la difference entre un + sur une string et un sur un nombre, je ne pensais vraimment pas que mon probleme venait de là... Je test et je vous dit quoi . Merci

**boutmos** · 18/08/2008, 18h38

Miss , j'en avais utilisé un juste au dessus dans mon .JS :

Code :

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

1
2
3
4
5
6
7
 
	//Conversion de la chaine en nombre entier		
	defaultFontSize = getFontSize.substring(0, getFontSize.length-2);
	defaultFontSize = parseInt(defaultFontSize);
 
	//Operation
	defaultFontSize = defaultFontSize + valeurPas;

J'y pense maintenant mais je ne sais pas si çà fera l'affaire au final cette histoire de h1 et autre balise, çà me forcerais comme pour le style et pour la taille de la fonte du body a stocker la valeur du fontSize de chaque balises dans un cookie , ... je vais me retrouver avec tout un arsenal de cookie a ecrire , analyser et lire.

En gros j'ecris un code me permettant de stocker la taille desiré par le visiteur de la font dans un cookie afin d'augmenter l'accessibilité du site web , exemple : http://fishtank.free.fr/spip
Je me substitut en effet aux fonctions des navigateurs mais çà fait parti du cahier des charges car celon mon boss, il n'y aurait pas bcp de gens qui utiliserais les fonctions CTRL++ CTRL+- CTRL+0

**boutmos** · 18/08/2008, 18h59

bon , je vous ecoute aveuglement et voici ce que j'obtiens a grand coup de ParseInt :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	var allh1 = document.getElementsByTagName("h1");
	var longueur = allh1.length;
	alert("Nb de balises <h1> dans ce document : "+longueur);
 
	var cpt = 0;
 
	while (allh1[cpt]) {
		var h1FontSize = allh1[cpt].style.fontSize;
		var parsedh1 = parseInt(h1FontSize);
		alert(parsedh1);		
		cpt++;
	}

le alert me donne en output : "NaN" systematiquement. Je me repete, mon probleme vient de ma façon a essayer de recuperer l'attribut fontSize de chaque balise h1, les probleme de conversions viendront par la suite. Merci

**Oscar Hiboux** · 18/08/2008, 19h37

Je pense que c'est parce que tu tentes de récupérer la taille de la police dans la propriété "style" - qui est le style local - de l'élément DOM. Si tu le récupérais dans le style final (computedStyle) tu devrais pouvoir retomber sur tes pattes.

Dans le cas présent j'imagine que "allh1[cpt].style.fontSize" te retourne "undefined". Me trompe-je ? (le truc imprononçable à l'oral

)

Pour éviter le NaN tu pourrais faire :

Code :

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

parseInt(h1FontSize || defaultSize)

mais ça ne résolverait pas entièrement ton problème puisque ça n'appliquerait pas, en fin de compte, la bonne taille au texte.

P.S. : ergonomiquement parlant, je pense comme ton boss : CTRL + ± / 0 ne sont pas des raccourcis très connus du grand publique. On voit parfois ces petits boutons [A-][A+] sur lesquels je pense que tu travailles et c'est vraiment une fonctionalité intéressante de par le confort qu'ils apportent.

**boutmos** · 18/08/2008, 20h19

Alors dans le cas present avec :

Code :

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

allh1[cpt].style.fontSize

je n'ai ps de message d'erreur ou autre , uniquement le NaN (D'ailleur, a quoi correspond ce NaN ??? merci).

Sinon lorsque j'utilise :

Code :

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

parseInt(h1FontSize || defaultSize)

j'obtient un code erreur javascript me disant que "defaultSize is not defined"

a quoi correspond cette notation || doit elle etre interpretée comme un OU ?

Sinon j'ai essayé de recuperer la valeur a maintes reprises via getComputedStyle mais apparement je maitrise mal cet objet ou la DOM. Merci

**boutmos** · 19/08/2008, 14h25

Re, j'ai reussi a "maitriser" l'objet getComputedStyle (FF) et son équivalent obj.currentStyle (IE) , je recupere donc la propriété fontSize de chacun de mes elements h1. Je fini le traitement et pour ceux que çà interessent, je posterais mon code.

Merci et desolé enore de le préciser mais mon erreur ne venait pas d'un ParseInt

**boutmos** · 20/08/2008, 11h34

voici ce que j'ai rajouté a la fin de mon fichier .JS

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
 
// Execptions : h1,h2, etc ... /!\ Ne sauvegarde pas encore la taille dans le cookie
var allTags_h1 = document.getElementsByTagName("h1");	// Recupere un tableau de tous les elements h1
var cpt = 0;
var h1TagDefaultFontSize;
 
while (allTags_h1[cpt]) {
 var h1 = document.getElementsByTagName("h1")[cpt];
 if (h1.currentStyle){		// Traitement pour IE
  var h1FontSize = h1.currentStyle['fontSize'];			
 } else if (window.getComputedStyle){		// Traitement pour FF
          var h1FontSize = window.getComputedStyle(h1, null).fontSize;
  }
 h1TagDefaultFontSize = parseInt(h1FontSize);	
 document.getElementsByTagName("h1")[cpt].style.fontSize = h1TagDefaultFontSize + valeurPas + "px";
cpt++;
}
 
// -- Fin des exceptions

Me reste plus qu'a stocker les valeurs dans le cookie mais le probleme c'est que c'est un traitement uniquement destiné aux balises <h1>, il faudrait que je le fasse pour toutes les autres balises ce qui va alourdir le code.

L'idéal serait d'appliquer un coefficient d'agrandissement a l'ensemble des éléments contenus dans le document, je lirais celui ci au chargement de la page et je l'appliquerais ensuite a toutes les balises *

Merci de votre aide.

Cdt

[DOM] Amélioration d'un fonction pour la taille des polices

JavaScript

Discussions similaires

Partager

Partager