Changement de feuille de style css en javascript
Bonjour.
Dans une page HTML, j'essaye de changer la FONT-SIZE d'une balise H4 à l'aide de Javascript.
Chose bizarre, le code Javascript fonctionne pour les balises H1, H2, H3 mais pas pour H4. Voilà un certain temps que j'essaye de comprendre pourquoi mais en vain...
J'ai même essayé de transformer la balise H4 en H1, pensant que H4 avait peut-être quelque chose de spécifique. Cela n'a toujours pas fonctionné...
J'ai donc besoin d'aide si quelqu'un a une idée.
Merci par avance.
Voici la feuille de style CSS correspondante :
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
| h4 {
font-size: 12px;
color: #360539;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px;
}
h1 {
font-size: 21.6px;
text-align: left;
font-weight: bold;
color: #360539;
width: 100%;
height: 60px;
margin: 5px 0px 0px 0px;
padding: 0px;
}
h2 {
font-size: 15.6px;
font-family: 'Cutive', serif;
text-align: left;
font-weight: bold;
color: #360539;
width: 100%;
margin: 0px 0px 15px 0px;
padding: 0px;
} |
Voici le code Javascript que j'utilise :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| window.onresize=function() {
var taille = document.getElementById("gauche").offsetWidth;
var taux = taille / 530;
var fontH1 = 21.6 * taux;
var fontH2 = 15.6 * taux;
var fontH3 = 7.8 * taux;
var fontH4 = 12 * taux;
document.getElementById('h1G').style.fontSize=fontH1+"px";
document.getElementById('h2G').style.fontSize=fontH2+"px";
document.getElementById('h3G').style.fontSize=fontH3+"px";
document.getElementById('h4G').style.fontSize=fontH4+"px";
} |
Enfin, voici un extrait de ma page HTML :
Code:
1
2
3
4
5
6
| <h1 id="h1G">PRÉNOM NOM</h1>
<h2 id="h2G">Fonction de l'administré</h2>
<div class="marge">
<h4 id="h4G">Adresse, Code postal, Ville</h4>
<h3 id="h3G"><span style="color: #360539;">Tél.</span> <span style="color: #81a220;">portable</span><br />00 00 00 00 00</h3>
</div> |
Nouvel élément concernant le problème...
Je viens d'essayer d'apporter une modification à mon code Javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| window.onresize=function() {
var taille = document.getElementById("gauche").offsetWidth;
var taux = taille / 530;
var fontH1 = 21.6 * taux;
var fontH2 = 15.6 * taux;
var fontH3 = 7.8 * taux;
var fontH4 = 12 * taux;
document.getElementById('h4G').style.fontSize=fontH4+"px";
document.getElementById('h1G').style.fontSize=fontH1+"px";
document.getElementById('h2G').style.fontSize=fontH2+"px";
document.getElementById('h3G').style.fontSize=fontH3+"px";
} |
A première vue, pas de changement et pourtant, j'ai tout simplement passé la ligne qui redimensionne la balise H4 en premier (avant H1, H2, H3).
Et là, ça fonctionne !!!
Je devrais être satisfait mais j'ai quand même du mal à comprendre pourquoi...
J'ai une piste de réflexion, malgré tout. Le code HTML que j'ai posté ne correspond pas tout à fait à la réalité. Le volume de texte contenu dans la balise H4 est bien plus important que celui contenu dans les autres balises.
Ma question est donc de savoir si le volume de texte a une incidence sur l'exécution de la fonction Javascript ?
