10550 sujets

JavaScript, DOM et API Web HTML5

Un petit truc qui peut intéresser plus d'un(e) et que j'ai découvert en cherchant sur le Net (https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html)

On peut avoir besoin de définir une taille de police en fonction d'une autre taille de police.

Par exemple, si un titre a une taille de police de 25px, on peut vouloir le rappeler quelque part en le réduisant de 15 % (ou en le diminuant de 3.75px).

Voici comment procéder :

1) Récupérer la taille de police du titre :
taille_de_police = window.getComputedStyle(monTitre, null).getPropertyValue("font-size");

2) Convertir la taille de police en nombre flottant, ce qui permet notamment d'éliminer l'unité (taille_de_police est une chaîne de caractères comprenant la valeur et l'unité) :
taille_de_police_convertie = parseFloat(taille_de_police);

3) Recopier le contenu du titre :
rappel_du_titre.innerHTML = monTitre.innerHTML;

4) Attribuer la taille de police désirée :
rappel_du_titre.style.fontSize = (taille_de_police_convertie * 0.85) + 'px';

ou
rappel_du_titre.style.fontSize = (taille_de_police_convertie - 3.75) + 'px';


Voili-voilà Smiley smile
Modifié par Beka (16 Oct 2018 - 15:45)
Merci de l'info, Bazooka.

Heureux d'apprendre que le css permet maintenant de disposer de variables.

Mais, pour l'instant, j'oriente mon travail sur la seule partie dynamique (en JavaScript donc) en réalisant un prototype en lorem ipsum disposant d'une décoration très minimale.

Je garde toutefois l'info en mémoire lorsque j'aborderai la vraie mise en page.