Discussion :

[boutmos]

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]

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]

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]

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]

on te dit de faire un parseInt....

[Oscar Hiboux]

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