Discussion :

[ThufirHawat]

Bonjour à toutes et à tous,

Je cherche à récupérer la taille de la police d'un texte placé dans un DIV de ma page.

J'essaye de procéder ainsi :

Code :

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

1
2
3
4
 
const conteneur = document.querySelector(`.classeDuConteneur`);
 
const taillePolice = const.style.fontSize;

Mais lorsque je console.log la variable "conteneur", je ne vois rien. Pas d'erreur, pas d'undefined, juste rien.

Si je répète le procédé sur 10 éléments de ma page (qui ont tous la même taille) et que j'affiche la taille de la police récupérée :

Code :

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

1
2
 
console.log('taille : ', taillePolice);

j'obtiens :



Donc j'obtiens 10 fois le même "rien".

Pourriez-vous m'aider ? Comment faire pour obtenir la taille de la police dans un format utilisable ? Idéalement j'aimerai récupérer "3em" ou "20px".

D'avance merci pour votre temps et pour votre aide.

Thufir Hawat

[ProgElecT]

Salut

Tout dépend d’où sont déclarées const conteneur = document.querySelector(`.classeDuConteneur`); et const taillePolice = const.style.fontSize; il faut que cette déclaration soit global pour être utilisé dans la fonction ou tu as mis console.log('taille : ', taillePolice);, ou faire la déclaration de ces variables dans la fonction console.log ....

[ThufirHawat]

J'utilise tout ce code au sein d'une fonction.

En gros j'affiche des titres de films dans des DIVs dans ma page, j'affiche 10 titres. Mais certains titres sont trop longs et s'affichent donc sur plusieurs lignes, ce que je veux éviter.
Donc je veux créer une fonction pour vérifier si le titre est trop long (j'utilise "clientWidth", "scrollWidth", "clientHeight" et "scrollHeight" pour déterminer cela), et si c'est le cas, réduire la taille de la police.

Au sein de cette fonction :

Code :

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

1
2
3
4
5
6
7
8
 
function taillePolice(classCont) {
    const cont = document.querySelector(`.${classCont}`);
 
    const taillePolice = cont.style.fontSize;
 
   ...
}

Ensuite je vérifie si le titre est trop long, si c'est le cas, je diminue la taille de la police. Et je relance la fonction autant de fois qu'il faut jusqu'à ce que le titre ne "dépasse" plus.

Mais pour le moment je ne parviens pas à récupérer la taille de la police.

Merci pour ton aide ProgElecT et merci à toutes les autres et tous les autres.

Thufir Hawat

[NoSmoking]

Bonjour,
pour récupérer à coup sûr il te faut utiliser la méthode window.getComputedStyle().

Code :

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

1
2
3
4
const elemCible = document......;
const styleElemCible = window.getComputedStyle(elemCible);
// ensuite pour utilisation :
console.log(styleElemCible.fontSize);

Ensuite je vérifie si le titre est trop long, si c'est le cas, je diminue la taille de la police. Et je relance la fonction autant de fois qu'il faut jusqu'à ce que le titre ne "dépasse" plus.

Ainsi au final tu peux obtenir un déséquilibre visuel entre tes différents titres.

Pourquoi ne pas regarder du côte de text-overflow:ellipsis ?

[ThufirHawat]

Merci beaucoup, je vais essayé cette méthode.

La plupart des titres entrent sans problèmes dans le conteneur et ne devront pas être redimensionnés. Ce ne sont que de rares cas qui nécessitent le changement de taille de police. Cela provoque en effet un certain déséquilibre visuel, mais je veux que le titre figure en entier.

J'ai effectivement testé avec text-overflow: ellipsis; ça permet de garder la taille de police identique pour tous les titres, mais les titres trop longs ne s'affichent pas en entier.
Je vais tester ce que cela donne avec le changement de taille, et si ce n'est pas satisfaisant je tenterai autre chose.

Merci beaucoup pour votre aide en tout cas.

Thufir Hawat

[ThufirHawat]

Voilà à quoi ressemble finalement ma fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function taillePolice(classCont) {
     const cont = document.querySelector(`.${classCont}`);
    if (cont.clientWidth - cont.scrollWidth < 0 || cont.clientHeight - cont.scrollHeight < 0) {
           const styleElemCible = window.getComputedStyle(cont);
           const tailleTitre = parseFloat(styleElemCible.fontSize.slice(0, -2));
           cont.style.fontSize = `${tailleTitre - 0.1}px`;
 
           taillePolice(classCont);
    }
}

Pour chaque titre de la page on lance la fonction "taillePolice()". Celle-ci vérifie si le titre "déborde", si c'est le cas, elle réduit la taille de la police de 0.1px. La fonction est récursive et continue donc à réduire la taille de la police jusqu'à ce que le titre ne déborde plus.

Merci pour votre aide.

Thufir Hawat