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 ?
