Comment puis-je obtenir la police et la taille du rendu en JavaScript ?

Dévoilement de la police rendue : accès à la police et à la taille réelles

Dans le domaine du développement Web, il est souvent nécessaire de récupérer la police et la taille réelles d'un élément, en particulier lorsqu'il s'agit de contenu généré dynamiquement ou de situations où les styles CSS ne sont pas explicitement définis. Cette tâche peut s'avérer difficile car l'approche conventionnelle de JavaScript pour accéder aux propriétés de style, telles que object.style.fontFamily, ne donne aucun résultat.

N'ayez crainte, car il existe une solution qui accorde à JavaScript le pouvoir de dévoiler la police rendue. attributs. La méthode getComputedStyle détient la clé pour accéder aux styles calculés, y compris les propriétés liées aux polices que nous recherchons.

Voici une fonction JavaScript qui exploite la méthode getComputedStyle :

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

Pour utiliser cette fonction et récupérez, disons, la taille de la police d'un élément, appelez simplement css(object, 'font-size'). Cela renverra une valeur telle que « 16px », représentant la taille réelle de la police rendue.

Il convient de noter que getComputedStyle n'est pas pris en charge par IE8. De plus, la police calculée peut ne pas toujours s'aligner sur la police souhaitée définie dans CSS en raison des paramètres par défaut du système ou des remplacements du navigateur. Néanmoins, cette fonction fournit un moyen fiable de récupérer les attributs de police réellement rendus, permettant ainsi aux développeurs de mieux contrôler la présentation visuelle de leurs pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!