[DOM] Amélioration d'un fonction pour la taille des polices
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:
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
