modifier un font-size par le dom

**NoSmoking** · 08/12/2011, 00h08

IE < 9 ne connaît effectivement pas getComputedStyle, mais connaît currentStyle, donc il faut composer avec les 2.

Code :

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

1
2
3
4
5
6
7
8
// W3C and IE9+
if( window.getComputedStyle){ 
  docStyle = document.defaultView.getComputedStyle( oElem, null);
}
else if( oElem.currentStyle){
  docStyle = oElem.currentStyle;
}
return( docStyle[propriete]);

**laurentSc** · 08/12/2011, 00h32

OK, même si je n'ai pas le temps d'approfondir ce soir, pour utiliser ton truc, dans mon cas, il faudrait que je remplace oElem par span (ou "span" ?) et propriete par "font-size" ; c'est bien ça ?

**Eric2a** · 08/12/2011, 01h26

Salut,

Il suffit de créer une fonction qui prend deux paramètres d'entrée :

1) L'élement pour lequel nous voulons obtenir la valeur de la propriété
2) Le nom de la propriété

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<script type="text/javascript">//<![CDATA[
		function CSS_PropertyValue(oElem,property){
			var docStyle='';
			if(window.getComputedStyle){
				docStyle=document.defaultView.getComputedStyle(oElem,null).getPropertyValue(property);
			}
			else if(oElem.currentStyle){
				docStyle=oElem.currentStyle[property];
			}
			return docStyle;
		}
 
		function showFontSizes(){
			var
				s='',
				ctc,
				FontSize,
				colecspan=document.getElementsByTagName('span');
 
			for(ctc=0;ctc<colecspan.length;ctc++){
				FontSize=CSS_PropertyValue(colecspan[ctc],'fontSize');
				s+=(ctc+1)+' : '+FontSize+'<br />';
			}
			document.getElementById('rpt').innerHTML=s;
		}
 
		window.onload=showFontSizes;
		//]]>
	</script>
</head>
<body>
	<p style="font-size:12px">
		1 : <span>Valeur par défaut : 12px</span><br />
		2 : <span style="font-size:10px">10 px</span><br />
		3 : <span style="font-size:12px">12 px</span><br />
		4 : <span style="font-size:14px">14 px</span><br />
		5 : <span style="font-size:1em">1 em</span><br />
		6 : <span style="font-size:1.2em">1.2 em</span><br />
		7 : <span style="font-size:1.4em">1.4 em</span>
	</p>
	<div id="rpt"></div>
</body>
</html>

**NoSmoking** · 08/12/2011, 20h07

Attention : il faut utiliser getComputesStyle et currentStyle qui retourne une valeur si l'on passe une propriété javascript, camelCase.

getPropertyValue(property) attend un format CSS, donc pour tout mettre dans la même fonction autant faire;

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function CSS_PropertyValue(oElem,property){
  var docStyle='';
  if(window.getComputedStyle){
    //docStyle=document.defaultView.getComputedStyle(oElem,null).getPropertyValue(property);
    docStyle=document.defaultView.getComputedStyle(oElem,null)[property];
  }
  else if(oElem.currentStyle){
    docStyle=oElem.currentStyle[property];
  }
  return docStyle;
}

**Watilin** · 08/12/2011, 21h29

J'aimerais intervenir à propos du document.write. Apparement, notre ami laurentSc l'utilise à des fins de debug. C'est un peu comme déboguer du C avec uniquement des printf...

Aujourd'hui, tous les navigateurs modernes ont une console JavaScript intégrant un débogueur (sous Firefox, il faut installer l'extension Firebug). Laurent, si tu es familier avec les débogueurs, tu y retrouveras les fonctionnalités habituelles : points d'arrêt et exécution pas à pas, inspection des variables, pile d'appels, etc. Et sinon, tu peux te contenter du très pratique console.log qui inscrit des informations dans la console sans arrêter le script en cours

**laurentSc** · 09/12/2011, 03h36

Le code de Eric2A corrigé par NoSmoking a l'air bien, car exécuté en local, il marche ; je creuserais sûrement demain...
Mais qu'est-ce que ça veut dire "camelCase" ?

il faut utiliser getComputesStyle et currentStyle qui retourne une valeur si l'on passe une propriété javascript, camelCase

C'est un peu comme déboguer du C avec uniquement des printf...

ou faire des "echo" en PHP, ce que je fais souvent (et les document.write, c'est pour faire pareil)

Laurent, si tu es familier avec les débogueurs

Oui, ayant utilisé des émulateurs qd je faisais du logiciel embarqué (C et assembleur) ds les années 90

sous Firefox, il faut installer l'extension Firebug

Je viens d'installer Firebug, mais comment as-t-on le débogueur ?

**Watilin** · 09/12/2011, 15h46

Faut chercher un peu !

Fais F12 et va dans l'onglet « Script » (faudra peut-être recharger la page). Ensuite, tu peux poser un point d'arrêt en cliquant sur les chiffres en vert dans la marge, ou alors arrêter directement le prochain script en cliquant sur le symbole « pause » jaune en haut à gauche.

**NoSmoking** · 09/12/2011, 20h35

Envoyé par laurentSc

Mais qu'est-ce que ça veut dire "camelCase" ?

réponse donnée par Watilin

Envoyé par Watilin

Faut chercher un peu !

et ICI

**laurentSc** · 10/12/2011, 01h54

Faut chercher un peu !

Oui, mais pas évident quand on n'y connait rien : je ne connaissais meme pas ce F12...et ça ne s'invente pas.
Bon encore un petit problème de js : je voudrais maintenant modifier le size de ces span. J'ai donc rajouté une deuxième fonction :

Code :

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

1
2
3
4
5
6
        function setFontSize(){
				var
				ctc,
				colecspan=document.getElementsByTagName('span');
			for(ctc=0;ctc<colecspan.length;ctc++){
			    colecspan[ctc].setAttribute("font size","40px");			}

et je ne sais si c'est correct (car je crois qu'il faudrait que les span existent déjà, et de plus, pas sûr de la syntaxe), je l'ai mise dans window.onload :

Code :

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

1
2
3
4
5
6
		function fct_onload(){
		    setFontSize();
		    showFontSizes();
		}
 
		window.onload=fct_onload;

Evidemment, ça marche pas ; donc comment modifier ces size ?

**NoSmoking** · 10/12/2011, 10h45

et je ne sais si c'est correct (car je crois qu'il faudrait que les span existent déjà, et de plus, pas sûr de la syntaxe), je l'ai mise dans window.onload :

Evidemment, ça marche pas ; donc comment modifier ces size ?

il ne faut pas que cela devienne une fatalité!!!

Dans la ligne : colecspan[ctc].setAttribute("font size","40px");, tu ne fais qu'ajouter un attribut 'font size' oui et alors ce que tu veux changer c'est le style de font-size(CSS), donc ce n'est pas la bonne approche.

La logique, au vue de ce qui a été mentionné dans ce post, aurait était de faire à minima colecspan[ctc].style.fontSize='40px';,
voir ce qu'a écrit Torgar

http://www.developpez.net/forums/d11...m/#post6386127.

Maintenant si je peux me permettre une remarque, où est que tout cela te mènera, à ne modifier QUE la taille de la police des SPANs!!

sachant que le site que je fais doit être accessible par les mal-voyants

le reste tu ne t'en préoccupes pas

Tu devrais avoir une approche globale du problème.
- prévoir une feuille de style, au départ, pourquoi modifier sur le onload, autant le faire tout de suite sans ajouter une couche de javascript.
- prévoir la conception/structure de ton document pour tenir compte des Hx ou autres balises UL, LI etc... en utilisant par exemple comme unité d'affichage le em
...j'en passe et surement de bien meilleurs

petit exemple de ce qu'il est rapidement faisable avec un bouton +/- sur la police

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
<!DOCTYPE HTML>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
html, body{ font-size : 1.0em; font-family : Verdana, Sans-Serif;}
h1{ font-size : 2.0em;}
h2{ font-size : 1.5em;}
</style>
<script type="text/javascript">
function CSS_PropertyValue( oElem, property){
  var docStyle='';
  if( window.getComputedStyle){
    docStyle=document.defaultView.getComputedStyle(oElem,null);
  }
  else if( oElem.currentStyle){
    docStyle = oElem.currentStyle;
  }
  return docStyle[property];
}
function changeFont( valeur){
  var sizeFont = CSS_PropertyValue( document.body, 'fontSize');
  var unitFont = sizeFont.replace(/(.[0-9])/g, '');
  sizeFont  = parseFloat( sizeFont);
  sizeFont += ( sizeFont*valeur);
  document.body.style.fontSize = sizeFont +unitFont;
}
</script>
</head>
<body>
<button onclick="changeFont(+0.25);">A+</button>
<button onclick="changeFont(-0.25);">A-</button>
<div>
  <h1>Titre</h1>
  <h2>Sous Titre</h2>
  <p>Paragraphe</p>
  <h2>Sous Titre</h2>
  <p>Paragraphe</p>
</div>
</body>
</html>

c'est pas géré top mais c'est pour te monter un principe.

**laurentSc** · 10/12/2011, 12h36

Je vais répondre point par point. Et d'abord, merci beaucoup pour ta réponse.

il ne faut pas que cela devienne une fatalité!!!

Certes, mais j'ai démarré en 2006 et avant je ne connaissais même l'existence du mot "html" ! Donc, j'estime être encore un débutant (bien dégrossi) et avoir pas mal de choses à apprendre.

Maintenant si je peux me permettre une remarque, où est que tout cela te mènera, à ne modifier QUE la taille de la police des SPANs!!

C'est vrai que vu de l'extérieur, ça fait vraiment bizarre (et pas logique). Mais il faut savoir que j'utilise un logiciel générateur de site, et que donc, une partie du code n'est pas de moi, et justement, le texte du menu (dont je voudrais modifier la taille) est inséré dans des span ; mais je me dis que si je reprends ton code, sachant que le menu est includé (par du PHP)(ça, c'est de moi, car ce logiciel met le code du menu dans chaque page (!)) (et donc, si on modifie le menu, il faut tout retransférer) dans le body, pas besoin de se préoccuper des span...

Et quelques questions sur ton code : à quoi sert le style, vu que si je l'enlève, ça ne change rien ?
A quoi sert le div (idem) ?
Pourrais-tu expliquer ces 2 lignes :

Code :

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

1
2
 var unitFont = sizeFont.replace(/(.[0-9])/g, '');
  sizeFont  = parseFloat( sizeFont);

Je viens de comprendre celle-là

Code :

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

var unitFont = sizeFont.replace(/(.[0-9])/g, '');

tu retires les chiffres, donc il ne reste que l'unité !

c'est pas géré top mais c'est pour te monter un principe.

C'est quoi qu'est pas top, vu que ça fait ce qu'on veut ?

**Eric2a** · 10/12/2011, 12h50

Envoyé par NoSmoking

prévoir la conception/structure de ton document pour tenir compte des Hx ou autres balises UL, LI etc... en utilisant par exemple comme unité d'affichage le em

+1

En effet, sous IE (*) une police dont la taille a été précisée en pixel ne peut ni être agrandie ni réduite via le menu : Affichage > Taille du texte

Il faut savoir que certains utilisateurs utilisent cette fonctionnalité en premier lieu par automatisme ou au pire, n'ont pas d'autre choix (s'ils restent sur IE) d'utiliser le zoom (Affichage > Zoom) qui leur fait perdre une partie des informations les obligeant à utiliser le translateur comme l'ascenseur.

Donc, même si un site contient des bouton déstinés à modifier la taille des polices, il est important que la taille des polices ne soit pas exprimée en pixels pour que l'utilsateur sur IE puisse grossir un texte à sa convenence via le menu : Affichage > Taille du texte.

(*) Je ne sais pas ce qu'il en ait d'IE9.

**laurentSc** · 10/12/2011, 13h41

+1 à NoSmoking et à Eric 2A pour me faire des réponses (je n'y avais pas pensé avant...)
Même si vous dite que se mettre en em, c'est mieux pour IE (au moins <9), le logiciel que j'utilise met tout en px, donc à moins de modifier son code (travail qui me semble risqué (modifier son fichier css)), l'utilisateur n'aura que les 2 boutons A+ et A- (ou le zoom) (avec IE)...

**NoSmoking** · 10/12/2011, 14h57

C'est quoi qu'est pas top, vu que ça fait ce qu'on veut ?

juste que faire 16*1.25 = 20 et que 20*0.75 = 15 donc on ne revient pas à la position de départ avec la méthode utilisée ici.

...travail qui me semble risqué (modifier son fichier css)

à un moment il faut bien prendre la main si tu veux obtenir ce que tu souhaites.

Tu peux également jouer sur plusieurs fichiers de style.

Code html :

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

1
2
3
<link rel="stylesheet" type="text/css" href="CSSnormal.css" title="">
<link rel="alternate stylesheet" type="text/css" href="css1.css" title="CSSplus">
<link rel="alternate stylesheet" type="text/css" href="css2.css" title="CSSmoins">

**laurentSc** · 10/12/2011, 15h37

à un moment il faut bien prendre la main si tu veux obtenir ce que tu souhaites.

Oui, et me suis dit que je supprimerais la prise de risque en sauvegardant le fichier avant de le modifier.

Tu peux également jouer sur plusieurs fichiers de style.

Dans ton exemple, il y a 3 feuilles de style ; cela veut donc dire que l'utilisateur n'aurait que 3 possibilités (un peu léger) : est-ce bien ça ?

donc on ne revient pas à la position de départ avec la méthode utilisée ici.

Mon idée pour corriger ça serait au lieu de passer "valeur" à la fonction "changeFont" de lui passer juste une string avec "+" ou "-", et après avoir récupérer le font-size courant de faire un switch (un si "+" et un si "-") : que penses-tu de cette idée ?

Et je fais le tout dans un fichier PHP afin de mémoriser la fontSize dans un cookie.
(Et pas besoin de feuille de style)
(Et bug vu sur la fonction "éditer" du forum : si on a déjà fait une modif, puis qu'on veut en faire une deuxième, on refait "éditer", et ça ne reprend que le post initial (sans la 1e modif qu'on avait apportée)).

**NoSmoking** · 10/12/2011, 16h45

Dans ton exemple, il y a 3 feuilles de style ; cela veut donc dire que l'utilisateur n'aurait que 3 possibilités (un peu léger) : est-ce bien ça ?

dans l'exemple OUI mais tu fais ce que tu veux

Mon idée pour corriger ça serait au lieu de passer "valeur" à la fonction "changeFont" de lui passer juste une string avec "+" ou "-", et après avoir récupérer le font-size courant de faire un switch (un si "+" et un si "-") : que penses-tu de cette idée ?

j'ai du mal à voir ce que cela apporterait !!!

**laurentSc** · 10/12/2011, 17h54

A mon avis, mon idée tient la route, mais je viens d'en avoir une nouvelle, plus simple, et qui permettrait de revenir à la valeur initiale : au lieu de faire (+/-) fois 0.25, faire (+/-)0.3 (si c'est bien des em, car avec des px, il vaudrait mieux (+/-)2...)(et on s'arreterait à 0.1em et à 4em !)

**Watilin** · 10/12/2011, 18h11

Envoyé par laurentSc

Oui, mais pas évident quand on n'y connait rien : je ne connaissais meme pas ce F12...et ça ne s'invente pas.

En effet, ça ne s'invente pas, mais ça se trouve dans le menu : Développement Web > Firebug > Ouvrir Firebug (F12)

**laurentSc** · 10/12/2011, 23h15

J'ai des soucis avec mon idée :sizeFont += ( sizeFont+parseFloat(valeur)); (Le parseFloat, c'est une précaution) et comme ça A+ et A- ont le même comportement (alors que dans un cas, on a valeur=0.3 et dans l'autre valeur=-0.3 ) et au bout de 5 clics, les boutons disparaissent !

**laurentSc** · 12/12/2011, 00h29

Pas moyen de diminuer la taille de la font dans mon code (alors que l'exemple de NonSmoking marche bien en local...)(et comme ça marche pas, j'ai pas non plus remplacé le * par un + (toujours pas compris pourquoi ça marche pas)).
Voici mon 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
  <meta content="text/html;charset=utf-8" http-equiv="content-type">
  <meta content="Lauyan TOWeb 3.1.7.579" name="generator">
  <!--...-->
  <script type="text/javascript">
function CSS_PropertyValue( oElem, property){
var docStyle='';
if( window.getComputedStyle){
docStyle=document.defaultView.getComputedStyle(oElem,null);
}
else if( oElem.currentStyle){
docStyle = oElem.currentStyle;
}
return docStyle[property];
}
 
function changeFont( valeur){
var sizeFont = CSS_PropertyValue( document.body, 'fontSize');
var unitFont = sizeFont.replace(/(.[0-9])/g, '');
sizeFont = parseFloat( sizeFont);
sizeFont += ( sizeFont*valeur);
document.body.style.fontSize = sizeFont +unitFont;
//alert('coucou');
}
 
  </script>
<!--...-->
</head>
<body>
<!-- mise en page nulle à chier à base de table html, générée par le logiciel que j'utilise -->
<table class="wg-maxheight" bgcolor="#ffffff"
 border="0" cellpadding="0" cellspacing="0"
 width="100%">
<!--BANNER-->
  <tbody>
    <tr>
      <td style="height: 1px;" align="center"
 bgcolor="#6699cc" valign="top">
      <div style="position: relative;">
      <div style="position: absolute; left: 0pt; width: 100%;">
      <table class="wg-paragraph" width="100%">
        <tbody>
          <tr>
            <td align="left" valign="top" width="33%"></td>
            <td align="center" valign="top" width="33%"><font
 style="font-size: 80%;"><!-- Entrez le script du champ ici. Ce contenu sera inséré tel quel dans votre site. //-->
 <button onclick="(changeFont(3));"><font size="2em">A+</font></button>
 <button onclick="(changeFont(-3));"><font size="2em">A-</font></button>
&nbsp;</font></td>
            <td align="right" valign="top" width="33%"></td>
          </tr>
        </tbody>
      </table>
<!--TW_LANGBAR--></div>
 
      <a href="../topic/index.php"><img
 src="../_frame/banusr.gif" alt="" border="0"></a></div>
      </td>
    </tr>
 
    <tr>
      <td class="wg-maxheight" valign="top">
      <table class="wg-maxheight" border="0"
 cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td style="height: 1px;" bgcolor="#ffffff"
 valign="top" width="101">
 
 <!--...menu... -->
<span>coucou</span>
            </td>
 
 
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Donc, si je clique sur "A+" coucou grossit bien, mais ne diminue pas si je clique sur "A-" ; pourquoi ? (et les classes dans ce code sont décrites dans un fichier css que j'ai retiré pour simplifier)

modifier un font-size par le dom

JavaScript

Discussions similaires

Partager

Partager