modifier un font-size par le dom [Résolu]

[laurentSc]

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 :

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]

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]

Code :

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 :

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

Oh non...

[laurentSc]

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 :

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]

document write ecrase le contenu ...

[laurentSc]

document write ecrase le contenu ...

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

Code :

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]

Bonjour,

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

Code :

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]

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

Code :

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

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

[Torgar]

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 :

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

Ca revient à écrire :

Code :

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

[Bovino]

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 :

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

ça ne donne rien...

Pas vraiment étonnant...

Code :

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 :

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]

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]

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 :

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

[NoSmoking]

Code :

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]

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]

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]

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 :

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]

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

Voici un exemple de son utilisation. (Exemple 6)

[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")

[Torgar]

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]

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 :

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() 
  {...