modifier un font-size par le dom

**laurentSc** · 07/12/2011, 00h42

Bonsoir,

sachant que le site que je fais doit être accessible par les mal-voyants, je souhaite donner un bouton qui permet de grossir le font-size. Sachant que mon but est de permettre de grossir le texte du fichier "menu.html" et que tous les textes sont ds des span, je fais avec le DOM ce code-là :

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
<script language="javascript" type="text/javascript"> 
var colecspan = document.getElementsByTagName("span");
document.write("length="+colecspan.length+"<br>");
 
for (var ctc = 0; ctc < colecspan.length ; ctc++)
{
document.write(ctc+":"+colecspan.style.fontsize+"<br>");
}
 
</script>
<table...>
Le menu
Exemple :
                      <tr>
                        <td width="2"></td>
                        <td>
                        <div class="wg-button"> <a
 style="position: relative;" href="http://.../index.php"
 title="Bienvenue sur le site de VHS !"
 onmouseover="javascript:wg_popup();"><img
 src="http://.../button.png" alt=""><span
 style="position: absolute; left: 10px; top: 17px; width: 68px;">Accueil</span></a></div>
                        </td>
                        <td width="2"></td>
                        <td width="2"></td>
                      </tr>
                      <tr style="height: 5px;">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
</table>

Evidemment, je n'en suis qu'au début ; mais mon pb actuel, c'est que colecspan.length vaut 0. Donc comment arranger ça ?

**SpaceFrog** · 07/12/2011, 08h33

La règle générale pour acceder à une propriété de style avec javascript est une sorte de camel case.

il faut mettre le caractère après le tiret en majuscule:

font-size devient fontSize .
margin-top => maginTop
list-style-type => listStyleType

a quelques rares exception c'est la règle à appliquer

**Bovino** · 07/12/2011, 08h46

Code :

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

var colecspan = document.getElementsByTagName("span");

Tu n'essayerais pas, par hasard, de récupérer des balises <span> qui n'existent pas encore dans la page ?

Code :

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

document.write("length="+colecspan.length+"<br>");

Oh non...

**laurentSc** · 07/12/2011, 11h59

Oh non...

Il est clair que ce que j'ai fait n'est pas terrible, mais étant néophyte, je ne sais pas quoi...

Tu n'essayerais pas, par hasard, de récupérer des balises <span> qui n'existent pas encore dans la page ?

Tu as vu juste : en plaçant le script js après le code html, c'est passé de 0 à 13 !

Une partie de mon code ne va pas, car il ne fait pas ça :

Code :

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

1
2
3
4
for (var ctc = 0; ctc < colecspan.length ; ctc++)
{
document.write(ctc+":"+colecspan.style.fontSize+"<br>");
}

(et si je mets du code js après, il n'est pas interprété...)

**SpaceFrog** · 07/12/2011, 12h00

document write ecrase le contenu ...

**laurentSc** · 07/12/2011, 12h09

document write ecrase le contenu ...

OK ; je l'ai donc commenté, mais avec ça :

Code :

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

1
2
3
4
5
6
7
var colecspan = document.getElementsByTagName("span");
//document.write("length="+colecspan.length+"<br>");
 
for (var ctc = 0; ctc < colecspan.length ; ctc++)
{
document.write(ctc+":"+colecspan.style.fontSize+"<br>");
}

ça ne donne rien...

**Torgar** · 07/12/2011, 12h23

Bonjour,

Moi j'ai fait comme ça avec Jquery. Ca évite de passer par une boucle

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
function adjust_font_size(choice) {
    if (choice == 'plus') {
        var font_size = $('#contenu').css('font-size');
        var newsize = parseInt(font_size.substr(0, font_size.length - 2)) + 1;
        $('#contenu').css('font-size', newsize);
    }
    else if (choice == 'reset') {
        $('#contenu').css('font-size', 12);
    }
    else {
        var font_size = $('#contenu').css('font-size');
        font_size = parseInt(font_size.substr(0, font_size.length - 2));
        var newsize = font_size - 1;
 
        if (font_size > 9) {
            $('#contenu').css('font-size', newsize);
        }
    }
}

Et trois boutons : [-] [reset] [+] avec des onclick.

Cordialement,

**laurentSc** · 07/12/2011, 12h42

Merci pour ta réponse, mais je ne comprends pas tout ; pourrais-tu expliquer cette ligne :

Code :

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

$('#contenu').css('font-size', newsize);

et d'autre part, tu parles de jQuery, mais c'est où dans ton code ?

**Torgar** · 07/12/2011, 12h58

Si tu ne sais pas ce qu'est jQuery : jQuery est une librairie Javascript incluant un grand nombre de méthodes et fonctions prêtes à l'emploi (ou presque). Le plus simple est de te référer au site en lui même pour mieux en comprendre tout les aspects.

Si tu le sais :

Cette ligne permet de modifier une propriété CSS via les fonctions de jQuery :

Code :

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

$('#contenu').css('font-size', newsize);

Ca revient à écrire :

Code :

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

document.getElementById('contenu').style.fontSize = newsize + 'px';

**Bovino** · 07/12/2011, 13h51

Envoyé par SpaceFrog

document write ecrase le contenu ...

Uniquement si le document est fermé. Dans le contexte de laurentSc, il est encore ouvert.

OK ; je l'ai donc commenté, mais avec ça :

Code :

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

1
2
3
4
5
6
7
var colecspan = document.getElementsByTagName("span");
//document.write("length="+colecspan.length+"<br>");
 
for (var ctc = 0; ctc < colecspan.length ; ctc++)
{
document.write(ctc+":"+colecspan.style.fontSize+"<br>");
}

Ah oui, c'est sûr que là, tous les document.write() ont été commentés !

ça ne donne rien...

Pas vraiment étonnant...

Code :

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

document.write(ctc+":"+colecspan.style.fontSize+"<br>");

colecspan est une collection d'objets HTML, qui ne possède donc pas de propriété style, il serait grand temps que tu le comprennes !

Code :

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

document.write(ctc+":"+colecspan[ctc].style.fontSize+"<br>");

Ceci dit, cette façon de faire reste bien pourrie, tu devrais plutôt t'inspirer de la solution de Torgar, avec ou sans jQuery (parce qu'utiliser jQuery juste pour ajuster un style CSS, c'est pas le plus optimisé).

**Torgar** · 07/12/2011, 14h12

C'est même plus simple sans, puisque l'on ne se trimballe pas le problème des unités comme avec jQuery, ou alors j'ai loupé un paragraphe dans la doc, ce qui est possible....

**laurentSc** · 07/12/2011, 17h55

jQuery est une librairie Javascript incluant un grand nombre de méthodes et fonctions prêtes à l'emploi (ou presque)

Ca, je le savais, mais comme je ne connais pas très bien, je ne savais pas que si on met un $, on fait fait appel à jQuery...

colecspan est une collection d'objets HTML, qui ne possède donc pas de propriété style

Mais pourtant, les span ont bien un attribut "style"...Est-ce que ça viendrait du "document" ici : var colecspan = document.getElementsByTagName("span"); ?

Et pourquoi ça marche pas ça :

Code :

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

1
2
3
4
5
6
 
for (var ctc = 0; ctc < colecspan.length ; ctc++)
{
document.write(ctc+":"+document.getElementById('span').style.fontSize+"<br>");
 
}

**NoSmoking** · 07/12/2011, 18h40

Code :

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

document.getElementsByTagName("span");

comme te l'a expliqué Bovino cette méthode renvoi une collection d'objets HTML, et donc le résultat est un "tableau", donc pour accéder à ses éléments il faut indicer celui ci.

Reprend le temps de lire ce que t'a écrit Bovino, c'est riche d'instructions.

Attention, je n'ai pas dit que le reste était pôvre

**laurentSc** · 07/12/2011, 18h59

OK, j'ai indicé le tableau et il n'y a plus d'erreur js, vu que le document.write s'affiche, mais le (colecspan[ctc]).style.fontSize est vide, et j'ai beau relire, je ne vois pas ce qui ne va pas...

**NoSmoking** · 07/12/2011, 19h47

Envoyé par laurentSc

OK, j'ai indicé le tableau et il n'y a plus d'erreur js, vu que le document.write s'affiche, mais le (colecspan[ctc]).style.fontSize est vide, et j'ai beau relire, je ne vois pas ce qui ne va pas...

lorsque l'on récupère de cette façon le style, on accéde à l'objet javascript, il faut que le style ait été initialisé dans la balise de l'élément.

Si le style est placé dans la partie style du document il te faut passer par la récupération via getComputedStyle.

**laurentSc** · 07/12/2011, 20h33

Oui, mais là, le style a bien été défini dans l'élément (exemple : span style="position: absolute; left: 10px; top: 17px; width: 68px;">Accueil</span>), mais il n'y a pas d'attribut "font-size"...Comme tout cela est dans une "div" (<div class="wg-button">), qui se réfère à une classe CSS et que dans ce CSS, tout ce que je vois avec un font-size, c'est

Code :

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

1
2
3
4
5
6
7
8
.wg-button a:hover
...
h1 {
 margin:4px 1px 1px 1px;
 font-size:20px;
 color:#000000;
 background-color: #6699CC;
}

est-ce que c'est cela qui est utilisé ? (Evidemment, ce code n'est pas de moi ; je cherche juste à le modifier)

**Torgar** · 07/12/2011, 21h07

Pourquoi tu n'utilises pas la fonction que t'as donné NoSmoking ?

Voici un exemple de son utilisation. (Exemple 6)

**laurentSc** · 07/12/2011, 21h49

Le lien que tu m'as donné est très intéressant. Je n'ai pas utilisé la fonction car je n'étais pas sur qu'il fallait le faire et le petit problème, c'est que l'exemple ne marche pas en local ! (Error on page, si je clique sur le bouton "getComputedStyle")

**Torgar** · 07/12/2011, 22h12

Envoyé par laurentSc

Le lien que tu m'as donné est très intéressant. Je n'ai pas utilisé la fonction car je n'étais pas sur qu'il fallait le faire et le petit problème, c'est que l'exemple ne marche pas en local ! (Error on page, si je clique sur le bouton "getComputedStyle")

Aucun problème de mon coté sous Firefox 8.0.

Si tu es sous IE, il se peut que ça ne fonctionne pas. Il doit exister des "fix" pour ça (premier lien sur google)

**laurentSc** · 07/12/2011, 22h51

J'ai testé et effectivement, ça marche bien sous FF6, mais je n'ai pas du bien utiliser le fix pour IE, car ça ne marche toujours pas :

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
 <script type="text/javascript">
if (!window.getComputedStyle) {    window.getComputedStyle = function(el, pseudo) {  
this.el = el;
this.getPropertyValue = function(prop) {
		  var re = /(\-([a-z]){1})/g;
		  if (prop == 'float') prop = 'styleFloat';
		  if (re.test(prop)) {
		  prop = prop.replace(re, function () {
		  return arguments[2].toUpperCase();});}
		  return el.currentStyle[prop] ? el.currentStyle[prop] : null;  }
		  return this;  
		  }} 
 
   function cStyles() 
  {...

modifier un font-size par le dom

JavaScript

Discussions similaires

Partager

Partager